Encodera

Thanks for reading!

Donate to the site — we work hard for you.

HTML & CSS reference

:first-child

Matches an element that is the first child of its parent.

Syntax

selector:first-child { … }

Examples

Only the first list item stands out:

<style>
  li:first-child { font-weight: bold; color: crimson; }
</style>
 
<ul>
  <li>First</li>
  <li>Second</li>
  <li>Third</li>
</ul>

Notes

The element must be first among all children, not just among elements of its type: if a heading comes before the paragraphs, p:first-child selects nothing. In that case use :first-of-type. :only-child matches an element that has no siblings.

See also

  • :last-child — Matches an element that is the last child of its parent.
  • :nth-child() — Matches children by their position: the third, every even one, every third one.
  • :nth-of-type() — Like `:nth-child()`, but counts only siblings with the same tag.

In the tutorial

  • Pseudo-classes — Styles for element states and positions — hover, focus, links, first-child, nth-child, not and form fields.

Thanks for reading!

Donate to the site — we work hard for you.