[CSS] :first-child와 :first-of-type 차이점

first-child 셀렉터는 첫 번째 자식을 선택해요.

first-of-type 셀렉터는 같은 타입 중 첫 번째인 경우 선택해요.

 

그러니까 예를 들어:

<div class="parent"> 
    <h1>제목</h1> <!-- :first-child -->
    <p>첫 번째 문단</p> <!-- p:first-of-type --> 
    <p>두 번째 문단</p>
    <p>세 번째 문단</p> <!-- :last-child -->
</div>

여기에서 첫 번째 문단을 선택하고 싶은 경우 p:first-of-type 을 사용해야 해요.

(첫 번째 자식은 h1 이기 때문에 :first-child 는 사용할 수 없어요.)

p:first-of-type { color: green; }