HTML & CSS reference

:last-child

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

Syntax

selector:last-child { … }

Examples

Dividers between items, but not after the last one:

<style>
  li { padding: 6px 0; border-bottom: 1px solid lightgray; }
  li:last-child { border-bottom: none; }
</style>
 
<ul style="list-style: none; padding: 0;">
  <li>Apples</li>
  <li>Pears</li>
  <li>Plums</li>
</ul>

Notes

A typical use is removing the extra margin or border of the last item. Often gap in flexbox or grid solves the same task without any pseudo-class.

See also

:first-child — Matches an element that is the first child of its parent.
:nth-child() — Matches children by their position: the third, every even one, every third one.

In the tutorial

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