CSS 의사 선택기: :first-of-type과 :first-child의 차이점은 무엇입니까?

first-of-type과 first-child는 매우 유사한 의사 선택자이며 종종 동일한 요소를 대상으로 합니다. 그렇지 않으면 혼란스러울 수 있으므로 그들이 하는 일을 살펴보겠습니다.

첫째 아이

first-child는 첫 번째 자식 요소만 봅니다. 아래의 예.example-one div:first-child {}는 첫 번째 div를 선택합니다. 예제 2에서 이를 시도하고 .example-two div:first-child {}라고 쓰면 아무 것도 선택되지 않습니다. 이것은 첫 번째 자식이 div가 아니기 때문입니다. a<h1>

<section class="example-one"> 
    <div></div>
    <div></div>
    <div></div>
</section>

<section class="example-two">
<h1>Hello World</h1>
<div></div>
<div></div>
</section>

첫 번째 유형

first-of-type 의사 선택기를 사용하면 해당 유형과 일치하는 첫 번째 자식 요소가 선택됩니다. 위와 같지만 first-of-type 가 있는 동일한 코드를 고려하십시오.
example-one div:first-of-type {}는 여전히 첫 번째 <div>를 선택합니다. 이는 첫 번째 자식이자 첫 번째 유형이기 때문입니다.
example-two div:first-of-type {}는 first-child와 마찬가지로 아무 것도 선택하지 않지만 <div> 유형의 첫 번째 요소인 두 번째 자식을 선택합니다.

차이점이 뭐야?

first-child 의사 선택자와 일치하는 요소는 하나만 있을 수 있습니다. 모든 부모 요소에는 해당 목록의 첫 번째 요소가 하나만 있기 때문입니다.

모든 상위 요소에 대해 많은fist-of-type 요소가 있을 수 있습니다. 부모 요소의 자식인 모든 요소는 first-of-type 의사 선택기로 선택할 수 있습니다.