We're looking for a user researcher to understand the needs of developers and designers. Is this you or someone you know? Check out the post: https://mzl.la/2IGzdXS

현재 번역은 완벽하지 않습니다. 한국어로 문서 번역에 동참해주세요.

The :first-child CSS pseudo-class represents any element that is the first child element of its parent.

문법

:first-child

예제

예제 1

HTML Content

<div>
  <span>This span is limed!</span>
  <span>This span is not. :(</span>
</div>

CSS Content

span:first-child {
    background-color: lime;
}

... looks like ...

예제 2 - Using UL

HTML Content

<ul>
  <li>List 1</li>
  <li>List 2</li>
  <li>List 3</li>
</ul>

CSS Content

li{
  color:red;
}
li:first-child{
  color:green;
}

... looks like ...

Specifications

Specification Status Comment
Selectors Level 4
The definition of ':first-child' in that specification.
Working Draft No change
Selectors Level 3
The definition of ':first-child' in that specification.
Recommendation No change
CSS Level 2 (Revision 1)
The definition of ':first-child' in that specification.
Recommendation Initial definition

브라우저 호환성

We're converting our compatibility data into a machine-readable JSON format. This compatibility table still uses the old format, because we haven't yet converted the data it contains. Find out how you can help!

Feature Chrome Firefox (Gecko) Internet Explorer Opera Safari
Basic support 4.0 3.0 (1.9) 7[1] 9.5 4
Feature Android Firefox Mobile (Gecko) IE Mobile Opera Mobile Safari Mobile
Basic support 1.0 1.0 (1.9.1) 7[1] 10.0 3.1

[1] Internet Explorer 7 doesn't update the styles when elements are added dynamically. In Internet Explorer 8, if an element is inserted dynamically by clicking on a link the first-child style isn't applied until the link loses focus.

참조

문서 태그 및 공헌자

이 페이지의 공헌자: ShihwanKim
최종 변경: ShihwanKim,