:first-child 가상 클래스

:first-child 가상 클래스 선택자는
부모 요소의 자식 요소 중에서 제일 첫 번째에 위치하는 요소를 선택합니다.

:first-child 가상 클래스 선택자는 :nth-child(1)과 동일합니다.

CSS :nth-child() 가상 클래스
HTML 
<ol>
    <li>li</li>
    <li>li</li>
    <li>li</li>
    <li>li</li>
</ol>
CSS 
li:first-child {
    background-color: yellowgreen;
}
실제 적용된 모습

:first-child 가상 클래스의 형식은 다음과 같습니다.

구문

CSS 
:first-child {
    /* ... */
}

예제

:first-child 가상 클래스 선택자를 이해하는데 도움이 되는 예제입니다.

첫 번째 제목 요소 스타일링

HTML 
<article>
    <h2>제목 요소</h2>
    <p>문단 요소 1</p>
    <p>문단 요소 2</p>
</article>
CSS 
article h2:first-child {
    background-color: yellowgreen;
}
실제 적용된 모습

중첩된 요소 스타일링

HTML 
<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>
CSS 
article *:first-child {
    background-color: yellowgreen;
}
실제 적용된 모습

브라우저 호환성

마지막 업데이트 정보: 2024-04-29

:first-child 가상 클래스의 브라우저 호한성
선택자
데스크탑 Chrome
Chrome
데스크탑데스크탑 Edge
Edge
데스크탑 Firefox
Firefox
Safari
Safari
:first-child 4 12 3 3.1
부모 요소가 없는 요소와 일치 57 79 52 지원하지 않음

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

명세서

:first-child 가상 클래스의 명세서 사양
명세서 사양
:first-child Selectors Level 4
#first-child-pseudo

참고문헌

같이 보기