Коротко: обратиться к последнему элементу в CSS можно селекторами :last-child (последний ребёнок), :last-of-type (последний из своего тега), :nth-last-child(1) (то же, но с отсчётом с конца). Самый частый приём — :not(:last-child) для отступов между элементами, кроме последнего.
Виды селекторов
| Селектор | Что выбирает |
|---|---|
:last-child |
последнего ребёнка родителя |
:last-of-type |
последний элемент такого тега |
:nth-last-child(1) |
то же, отсчёт с конца |
:not(:last-child) |
все, кроме последнего |
Вкладки: примеры
.list li:last-child { border-bottom: none; }Убирает нижнюю границу у последнего пункта. Обратите внимание: :last-child сработает, только если элемент действительно последний ребёнок родителя — любые «лишние» узлы (например, комментарий) могут помешать.
.content p:last-of-type { margin-bottom: 0; }«Последний абзац в блоке» — даже если после него идёт div с картинкой. :last-of-type считает только элементы своего тега, поэтому надёжнее в реальных макетах.
.menu li:not(:last-child) { margin-right: 16px; }Классика: отступ у всех пунктов, кроме последнего. Так группа не «сдвигается» влево. Современная альтернатива — gap во flex, но :not(:last-child) всё ещё полезна.
/* последние три элемента */
.list li:nth-last-child(-n+3) { opacity: .5; }
/* второй с конца */
.list li:nth-last-child(2) { color: #003F8F; }:nth-last-child(-n+3) выбирает три последних. Удобно для «затухания» списка или выделения предпоследних строк.
:last-child может не сработать. Когда это критично — используйте :last-of-type или задайте gap вместо отступов.Практика: список без «лишнего» отступа
- Выберите, что считать «последним» (ребёнок или тип тега).
- Напишите селектор
:last-childили:last-of-type. - Обнулите отступ/границу/разделитель.
- Проверьте в DevTools, применилось ли правило.
- Тест на динамике: если элементы добавляются скриптом, проверьте ещё раз.
Частые ошибки: причина → решение
| Симптом | Причина | Решение |
|---|---|---|
| Селектор не срабатывает | последний элемент — не тот тег | :last-of-type |
| Срабатывает не на том | пробельные узлы/комментарии | убрать лишнее или сменить селектор |
| Отступ «пропал» у всех | использован :last-child без :not() |
проверить логику селектора |
| Ломается при JS-добавлении | порядок изменился | пересмотреть подход (gap) |
Проверьте себя
li:not(:last-child)?
Вопросы и ответы
Скорее всего последний ребёнок родителя — другой элемент или есть текстовые узлы. Используйте :last-of-type или явный класс.
Во flex/grid — свойством gap: оно само задаёт промежутки и не оставляет «лишних» отступов.
Через :nth-last-child(-n+3) — формула считает от конца.
Да, :last-child, :last-of-type, :nth-last-child и :not() поддерживаются всеми современными браузерами.
Итоги
:last-child— последний ребёнок;:last-of-type— последний своего тега.:not(:last-child)— отступы у всех, кроме последнего.:nth-last-child()— отсчёт с конца (удобно для «трёх последних»).- Во flex/grid часто проще заменить отступы на
gap.
Комментарии
Пока комментариев нет — будьте первым, кто поделится мнением.