CSS - :first-child

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

Examples

Example 1

HTML Content

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

CSS Content

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

... looks like ...

Example 2 - Using UL

HTML Content

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

CSS Content

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

... looks like ...

Syntax  

CSS
:first-child <a href="css/value_definition_syntax#curly_braces_(.7b_.7d)" title="Curly braces">{</a> <var>style properties</var> <a href="css/value_definition_syntax#curly_braces_(.7b_.7d)" title="Curly braces">}</a>

Description  

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

Browser Compatibility  

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.

See Also  

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

License

© 2016 Mozilla Contributors
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
https://developer.mozilla.org/en-us/docs/web/css/:first-child

CSS CSS Pseudo-class Layout Reference Web