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

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.

Compatibility

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

Internet Explorer 7, 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 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.