🤩50% Off over 600 tech courses and books

:first-child (CSS selector)

    Adam Roberts
    Share

    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.

    Example

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

    li:first-child {
      ⋮ declarations
    }