[CSS] first-child, first-of-type 차이

CSS
[CSS] first-child, first-of-type 차이

힘없는염소 2015. 12. 15. 10:18
<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="utf-8">
    <style>
    
        /* 
        예제1) 1번예제는 아무 변화가 없다.
        이유는 부모요소(div)의 자식으로 p 태그가 첫번째 자식으로 위치 해야 :first-child 가 적용되는데 2번째 이기때문이다.
        */
        div p:first-child {     /* div의 첫번째 자식이 p인 요소들은 배경색을 변경한다. */
            background: #ff0000;
        }
        /* 
        예제1) 2번예제도 아무변화가 없다.
        div를 명시하지 않고 다음과 적으면 문서전체에서 찾는다. 즉 child라는 의미를 상기하자 (걍..자식인 요소만 적용된다는거..)
        p태그가 xxx부모요소의 첫번째 자식이면 다음 CSS를 적용된다.
        */
        p:first-child {
            background: #ff0000;
        }
        /* 
        예제3) 1번,2번예제의 문제를 해결할 3번째..
        :first-of-type는 tag type의 순서로 선택된다.
        p태그가 xxx부모요소의 첫번째 type이면 다음 CSS가 적용된다. 
        */
        p:first-of-type {
            background: #ff0000;
        }
    </style>
</head>
<body>
    <div>
        <div>div태그1번</div>
        <p>p태그1번</p>
        <p>p태그2번</p>
    </div>
    <ul>
        <li>
            <h1>h1태그 1번</h1>
            <p>p태그1번</p>
            <p>p태그2번</p>
        </li>
    </ul>
</body>
</html>
저작자표시 (새창열림)