🤯 50% Off! 700+ courses, assessments, and books

:first-child (CSS selector)

    Adam Roberts


    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:

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

    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.


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

    li:first-child {
      ⋮ declarations