:first-child (CSS selector)
Example
This example selector matches the
first list item in an ol or ul
element:
li:first-child {
⋮ declarations
}
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.
Compatibility
| IE | 5.5 | None |
|---|---|---|
| 6.0 | None | |
| 7.0 | Buggy | |
| Firefox | 1.0 | Buggy |
| 1.5 | Buggy | |
| 2.0 | Buggy | |
| Safari | 1.3 | Buggy |
| 2.0 | Buggy | |
| 3.0 | Buggy | |
| Opera | 9.2 | Buggy |
| 9.5 | Full |
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.
Footnotes
1 To perform that match,
you can use li>*:first-child.
User-contributed notes
There are no comments yet.
Add a note
To post a note on this topic, please log in with your SitePoint username and password. If you don't have an account yet, you can create a new account for free.

