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