CSS :first-of-type
의사 클래스는 형제 요소 중 자신의 유형과 일치하는 제일 첫 요소를 나타냅니다.
/* Selects any <p> that is the first element
of its type among its siblings */
p:first-of-type {
color: red;
}
참고: 초기 정의에서는 부모가 있는 요소만 선택할 수 있었습니다. Selectors Level 4부터는 이 제한이 사라졌습니다.
구문
:first-of-type
예제
첫 문단 스타일링
HTML
<h2>Heading</h2>
<p>Paragraph 1</p>
<p>Paragraph 2</p>
CSS
p:first-of-type {
color: red;
font-style: italic;
}
결과
중첩 요소
아래 코드는 중첩 요소를 선택하는 방법을 보입니다. 기본 선택자를 지정하지 않은 경우 전체 선택자(*
)가 암시된다는 점도 볼 수 있습니다.
HTML
<article>
<div>This `div` is first!</div>
<div>This <span>nested `span` is first</span>!</div>
<div>This <em>nested `em` is first</em>, but this <em>nested `em` is last</em>!</div>
<div>This <span>nested `span` gets styled</span>!</div>
<b>This `b` qualifies!</b>
<div>This is the final `div`.</div>
</article>
CSS
article :first-of-type {
background-color: pink;
}
결과
명세
Specification | Status | Comment |
---|---|---|
Selectors Level 4 The definition of ':first-of-type' in that specification. |
Working Draft | Matching elements are not required to have a parent. |
Selectors Level 3 The definition of ':first-of-type' in that specification. |
Recommendation | Initial definition. |
브라우저 호환성
BCD tables only load in the browser
The compatibility table on this page is generated from structured data. If you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request.