CSS :first-of-type

같은 이름 태그 형제 중 첫 번째 요소 선택

:first-of-type 가상 클래스 선택자는
특정 유형(태그 이름)의 형제 요소들 중에서만 기준으로 첫 번째에 위치하는 요소를 선택합니다. 특정 유형이란 태그 이름의 유형입니다.

 

이 글은 코딩에브리바디(codingeverybody.kr)의 내용을 참조해 작성했습니다.

 

 

예를 들어, p:first-of-type은 같은 부모의 <p> 요소들만 세어서 첫 번째 <p> 요소를 선택합니다.

 

<section>
    <p>'p' 태그 유형 중에서 첫 번째 요소</p>
    <div>'div' 태그 유형 중에서 첫 번째 요소</div>
    <p>'p' 태그 유형 중에서 두 번째 요소</p>
    <p>'p' 태그 유형 중에서 세 번째 요소</p>
    <div>'div' 태그 유형 중에서 두 번째 요소</div>
    <div>'div' 태그 유형 중에서 세 번째 요소</div>
</section>

 

/* <section>의 <p> 태그 유형의 자식 요소들 중에서
 * <p> 태그 유형을 기준으로
 * 제일 첫 번째에 위치하는 요소
*/
section p:first-of-type {
    background-color: yellowgreen;
}

/* <section>의 <div> 태그 유형의 자식 요소들 중에서
 * <div> 태그 유형을 기준으로
 * 제일 첫 번째에 위치하는 요소
*/
section div:first-of-type {
    background-color: orange;
}

 

주의할 점

:first-of-type 가상 클래스 선택자는
특정 유형(태그 이름)의 형제 요소들 중에서 그 유형을 기준으로 제일 첫 번째에 위치하는 요소들을 선택합니다.

 

특정 유형이란 태그 이름의 유형입니다.

<style>
    .red-item:first-of-type {
        color: red;
        font-weight: bold;
    }
</style>
<ol>
    <li>red-item 클래스 값이 없어요</li>
    <li class="red-item">매칭될 요소로 기대하지만 아님</li>
    <li class="red-item">li</li>
</ol>
<!--
    * 혹시 .red-item 유형 중에서 첫 번째를 선택했나요?
    * 그렇다면 잘못된 선택입니다.
    *
    * :first-of-type은 태그 유형의 형제 요소들 중에서 제일 첫 번째에 위치하는 요소를 선택합니다.
    *
    * .red-item:first-of-type는 두 부분으로 나뉩니다.
    * => .red-item: 클래스 속성의 값이 'red-item'인 요소의 태그 이름은 <li>입니다.
    * => 특정 유형은 태그 이름 유형을 의미합니다.
    * => <li> 요소가 특정 유형이 됩니다.
    * => 태그 유형이 <li>의 첫 번째 요소가 'red-item'라는 클래스 속성의 값이 있어야 선택됩니다.
    * => 따라서, 위 요소 중에서는 매칭되는 요소가 없습니다.
-->

 

특정 유형이 '태그 이름'이라는 것을 모른다면 :first-of-type 가상 클래스 선택자가 제대로 작동하지 않는 것처럼 보일 수 있으니 주의해야 합니다!

 

https://codingeverybody.jp/css-first-of-type-pseudo-class/

CSS :first-of-type疑似クラス：同じタグ名を持つ兄弟要素の中から最初の要素を選択 - codingEverybody

 

https://coding.courses/css-first-of-type-pseudo-class/

CSS :first-of-type Pseudo-Class – Select the First Child of the Same Tag - codingCourses