:first-of-type
가상 클래스
:first-of-type
가상 클래스 선택자는
특정 유형(태그 이름)의 형제 요소들 중에서 그 유형을 기준으로 제일 첫 번째에 위치하는 요소를 선택합니다.
:first-of-type
가상 클래스 선택자는 :nth-of-type(1)
과 동일합니다.
<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;
}
'p' 태그 유형 중에서 첫 번째 요소
'div' 태그 유형 중에서 첫 번째 요소
'p' 태그 유형 중에서 두 번째 요소
'p' 태그 유형 중에서 세 번째 요소
'div' 태그 유형 중에서 두 번째 요소
'div' 태그 유형 중에서 세 번째 요소
:first-of-type
가상 클래스의 형식은 다음과 같습니다.
구문
:first-of-type {
/* ... */
}
예제
:first-of-type
가상 클래스 선택자를 이해하는데 도움이 되는 예제입니다.
첫 번째 문단 요소 스타일링
<article>
<h2>제목 요소</h2>
<p>문단 요소 1</p>
<p>문단 요소 2</p>
</article>
article p:first-of-type {
background-color: yellowgreen;
}
제목 요소
문단 요소 1
문단 요소 2
중첩된 요소 스타일링
<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;
}
이 'div'는 첫 번째입니다.
이 중첩된 'span'은 첫 번째입니다.!
이 중첩된 'em'은 첫 번째입니다., 하지만 중첩된 이 'em'은 마지막입니다.!
이 중첩된 'span'은 스타일됩니다.!
이 'p'는 첫 번째입니다.
이 'div'는 마지막입니다.
주의할 점
: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'라는 클래스 속성의 값이 있어야 선택됩니다.
* => 따라서, 위 요소 중에서는 매칭되는 요소가 없습니다.
-->
.red-item:first-of-type
선택자로 매칭되는 요소가 없습니다.
- red-item 클래스 값이 없어요
- 매칭될 요소로 기대하지만 아님
- li
특정 유형이 '태그 이름'이라는 것을 모른다면 :first-of-type
가상 클래스 선택자가 제대로 작동하지 않는 것처럼 보일 수 있으니 주의해야 합니다!
브라우저 호환성
선택자 |
데스크탑 Chrome
|
데스크탑데스크탑 Edge
|
데스크탑 Firefox
|
Safari
|
---|---|---|---|---|
:first-of-type
|
1 | 12 | 3.5 | 9.5 |
명세서
명세서 사양 | |
---|---|
:first-of-type
|
Selectors Level 4 #first-of-type-pseudo |