:first-child

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

Syntax

:first-child { style properties }

Examples

Example 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 ...

Example 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

Browser compatibility

[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

• :last-child
• :nth-child
• :last-of-type