:first-child (CSS selector)

Spec
Version
CSS1
Browser support (more…)
IE7+ FF3+ SA4+ OP9.5+ CH2+
Buggy Full Full Full Full

Syntax

:first-child {
declaration block
}

Description

This pseudo-class matches an element only if it’s the first child element of its parent element. For instance, li:first-child matches the first list item in an ol or ul element. It doesn’t match the first child of a list item.1

For example, let’s take the CSS selector mentioned above:

li:first-child {
  ⋮ declarations
}

And let’s apply it to the following markup:

<ul>
  <li>This item matches the selector li:first-child.</li>
  <li>This item does not match that selector.</li>
  <li>Neither does this one.</li>
</ul>

Only the first list item element is matched.

Note that this pseudo-class only applies to elements—it doesn’t apply to anonymous boxes generated for text.

Example

This example selector matches the first list item in an ol or ul element:

li:first-child {
  ⋮ declarations
}

Compatibility

Internet Explorer Firefox Safari Opera Chrome
5.5 6.0 7.0 8.0 1.0 1.5 2.0 3.0 3.5 1.3 2.0 3.1 4.0 9.2 9.5 10.0 2.0
None None Buggy Buggy Buggy Buggy Buggy Full Full Buggy Buggy Buggy Full Buggy Full Full Full

In Internet Explorer 7 some SGML constructs, such as comments, are counted as elements.

Internet Explorer versions 7 and 8, Firefox versions up to and including 2, Safari versions up to and including 3, and Opera 9.2 continue to select an element as the first child even when another element is dynamically inserted before it.

Internet Explorer 7 and Firefox 1/2 select the first SGML construct on the page (usually the doctype), even though it’s not a child of another element.

Opera 9.2 selects the root element, html, even though it isn’t a child of another element.

Footnotes

1 To perform that match, you can use li>*:first-child.

User-contributed notes

Related Products