<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 {
    /* ... */
}
<article>
    <h2>제목 요소</h2>
    <p>문단 요소 1</p>
    <p>문단 요소 2</p>
</article>
article p:first-of-type {
    background-color: yellowgreen;
}
실제 적용된 모습
<article>
    <div>이 `div`는 첫 번째입니다.</div>
    <div>이 <span>중첩된 `span`은 첫 번째입니다.</span>!</div>
    <div>
        이 <em>중첩된 `em`은 첫 번째입니다.</em>, 하지만 <em>중첩된 이 `em`은 마지막입니다.</em>!
    </div>
    <div>이 <span>중첩된 `span`은 스타일됩니다.</span>!</div>
    <p>이 `p`는 첫 번째입니다.</p>
    <div>이 `div`는 마지막입니다.</div>
</article>
article :first-of-type { /* article *:first-of-type과 동일 */
    background-color: yellowgreen;
}
실제 적용된 모습
<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'라는 클래스 속성의 값이 있어야 선택됩니다.
    * => 따라서, 위 요소 중에서는 매칭되는 요소가 없습니다.
-->
실제 적용된 모습 .red-item:first-of-type 선택자로 매칭되는 요소가 없습니다.
:first-of-type 가상 클래스의 브라우저 호한성
선택자
Chrome
Chrome
Edge
Edge
Firefox
Firefox
Safari
Safari
:first-of-type 1 12 3.5 9.5

caniuse.com에서 더 자세한 정보를 확인해 보세요.