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