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.