:first-child & :first-of-type 차이점

:first-child 와 :first-of-type 의 중요한 차이점

:first-child와 :first-of-type은 매우 유사하지만 간과할 수 있는 중요한 차이점이 있습니다.

이 차이점에 대해 알아보도록 하겠습니다.

:first-child

:first-child 는 자식요소 중에 가장 첫번째를 선택하는 가상클래스입니다.

css

div p:first-child { color: red; }

위의 예제는 div 하위의 p 요소 중 첫번째 요소의 글자 색상을 빨간색으로 지정한 것입니다.

:first-of-type

:first-of-type 역시 마찬가지로 자식 요소중에 가장 첫번째를 선택하는 가상클래스입니다.

:fist-child와 차이점은 첫번째 자식 요소로 특정하는 순서를 카운트할 경우 특정 타입 엘리먼트에 대해서만 카운트를 한다는 점입니다.

css

div p:first-of-type { color: blue; }

기본적인 사용 방식은 :first-child 와 동일합니다.

:first-child 와 :first-of-type 의 차이점

사실 위의 설명만으로는 차이점을 인지하기에는 부족합니다.

그래서 아래와 같은 코드를 통해 차이점에 대해 알아보도록 하겠습니다.

html

<div>
    <div>text1</div>
    <p>text2</p>
    <p>text3</p>
</div>

위와 같은 마크업이 있다고 가정하고 text2의 글자 색상을 빨간색으로 지정하려고 합니다.

css

/* Case1 */ 
div p:first-child { color: #ff0000; }

/* Case2 */ 
div p:first-of-type { color: #ff0000; }

위와 같이 CSS를 정의한다고 했을 경우에 결과물은 매우 다르게 나타납니다.

Case1 의 경우는 text2 글자 색상에 변화가 없고, Case2 인 경우에만 원하는 결과물을 얻을 수 있습니다.

그 이유는 :first-child 의 경우 div 하위 엘리멘트중에 p 엘리먼트가 가장 첫번째에 위치해야  :first-child 가상클래스를 통해 선택할 수 있기 때문입니다.

위 마크업은 div 하위 요소중에 가장 첫번째는 div 엘리먼트이기 때문에 선택할 수 없었던 것입니다. 

반면에, :firt-of-type 은 실제 p 엘리먼트만을 기준으로 카운트를 하기 때문에 선택할 수 있는 것입니다.

다시 말해 가상클래스 명칭에서도 알 수 있듯이 타입만을 체크하는 것입니다.(예제는 p타입 중에 첫번째를 선택한다는 의미)

이 점이 두 가상클래스 선택자의 중요한 차이점입니다.

Jaehee's WebClub