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

데브코스 1주차 내용 중 CSS를 공부하면서 first-child와 first-of-type이 동일하게 첫 번쨰 요소를 고른다고 하는데 어떤 차이가 있는지 궁금해졌다.

 

그래서 뭐가 다른데?

어떤 요소를 중심으로 생각하고 조건에 맞는 요소를 찾느냐가 다르다!

예를 들어서 div 태그 하위에 다수의 p태그가 있다고 하자

<div>
    <p>p</p>
    <p>p</p>
    <p>p</p>
    <p>p</p>
</div>

 

이때 css에서 first-child를 사용하면

div > p:first-child {
    ...
}

브라우저는 div 하위의 첫 번째 자식 요소가 p일 때 해당 스타일을 적용한다.

 

반면, first-of-type은

div > p:first-of-type {
    ...
}

div 하위의 p태그 중 첫 번째 요소를 선택한다.

 

 

See the Pen Untitled by soyoung park (@soyoung125) on CodePen.

See the Pen last by soyoung park (@soyoung125) on CodePen.

See the Pen Untitled by soyoung park (@soyoung125) on CodePen.

See the Pen nth-last by soyoung park (@soyoung125) on CodePen.

위의 코드들을 보면 first-child, first-of-type에 국한되지 않는 것을 확인할 수 있다.

 

child는 부모가 중심이 되어 조건에 특정 요소가 부합하는지를 체크하고, type은 자식 요소가 중심이 되어 형제 중 조건에 부합하는 요소를 찾아낸다.