현재 번역은 완벽하지 않습니다. 한국어로 문서 번역에 동참해주세요.
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.