Справочник HTML & CSS

:last-child

Срабатывает у элемента, который стоит последним среди детей своего родителя.

Синтаксис

selector:last-child { … }

Примеры

Разделители между пунктами, но не после последнего:

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

Примечания

Типичное применение — убрать лишний отступ или рамку у последнего элемента. Часто ту же задачу без псевдокласса решает gap во flexbox или grid.

См. также

:first-child — Срабатывает у элемента, который стоит первым среди детей своего родителя.
:nth-child() — Выбирает детей по их номеру: третий, каждый чётный, каждый третий.

В учебнике

Псевдоклассы — Стили для состояний и положения элементов — hover, focus, ссылки, first-child, nth-child, not и поля форм.