:last-child: оформление последнего элемента группы
Last-child выбирает последний дочерний элемент родителя. Частый случай — убрать разделитель после последнего пункта списка, не меняя разметку при добавлении новых пунктов.
Назначение
Last-child выбирает последний дочерний элемент родителя. Частый случай — убрать разделитель после последнего пункта списка, не меняя разметку при добавлении новых пунктов.
Как это работает
Селектор зависит от фактического порядка элементов. Комментарии и текстовые пробелы после последнего пункта не мешают совпадению. Знак > ограничивает правило непосредственными дочерними элементами выбранного списка.
Пример
<style>.last-demo>li{padding:.7rem;border-bottom:1px solid #a9c2b1}.last-demo>li:last-child{border-bottom:0}</style>
<ul class="last-demo"><li>Создать документ</li><li>Добавить стили</li><li>Проверить страницу</li></ul>Что должно получиться
У первых двух пунктов видна нижняя граница, у последнего — нет. При добавлении нового li исключение автоматически переходит к нему.
Граница применения и частая ошибка
Не добавляйте в ul произвольный блок после списка пунктов: это нарушает модель содержимого и ожидания селектора. Для последнего подходящего элемента определённого типа last-child может оказаться неверным выбором. Положение не заменяет смысловую пометку «завершено».
Самостоятельная проверка
Добавьте четвёртый пункт и вложенный список в один из предыдущих. Убедитесь, что правило с > не оформляет вложенные li. Затем сравните его с селектором без прямого дочернего комбинатора.
HTML и CSS можно изменить в песочнице ниже. Она изолирована: JavaScript, внешние ресурсы и отправка форм отключены. Проверки печати, загрузки файлов и сетевых ответов выполняйте в отдельном учебном проекте.