:last-childСелектор позволяет целевой последний элемент непосредственно внутри его элемента. Он определен в спецификации CSS Selectors Level 3 как «структурный псевдокласс», что означает, что он используется для стилизации контента на основе его отношений с родительским и родственным контентом.
Предположим, у нас есть статья, и мы хотим уменьшить последний абзац, чтобы он служил завершением содержания (например, примечание редактора):
Lorem ipsum…
Dolor sit amet…
Consectetur adipisicing…
Last paragraph…
Вместо использования класса (например .last) мы можем использовать :last-childдля его выбора:
p:last-child ( font-size: 0.75em; )Использование :last-childочень похоже на, :last-of-typeно с одним важным отличием: оно менее специфично. :last-childбудет пытаться сопоставить только самый последний дочерний элемент родительского элемента, тогда как last-of-typeбудет соответствовать последнему вхождению указанного элемента, даже если он не является последним в HTML. В приведенном выше примере результат будет таким же, только потому, что последний дочерний элемент articleтакже оказывается последним pэлементом. В этом проявляется сила :last-child: он может идентифицировать элемент по отношению ко всем его братьям и сестрам, а не только братьям и сестрам того же типа.
Более полный пример ниже демонстрирует использование :last-childи связанный с ним селектор псевдокласса :first-child.
Поддержка браузера
| Хром | Сафари | Fire Fox | Опера | IE | Android | iOS |
|---|---|---|---|---|---|---|
| Любой | 3.2+ | Любой | 9.5+ | 9+ | Любой | Любой |
:last-childбыл представлен в модуле CSS Selectors Module 3, что означает, что старые версии браузеров его не поддерживают. Однако поддержка современных браузеров безупречна, а новые псевдоселекторы широко используются в производственных средах. Если вам требуется поддержка старых версий браузера, используйте polyfill для IE или используйте эти селекторы некритическими способами, например, с прогрессивным улучшением, что рекомендуется.