:first-of-typeСелектор в CSS позволяет целевой первое вхождение элемента в пределах его контейнера. Он определен в спецификации CSS Selectors Level 3 как «структурный псевдокласс», что означает, что он используется для стилизации контента на основе его отношений с родительским и родственным контентом.
Допустим, у нас есть статья с заголовком и несколькими абзацами:
Paragraph 1.
Paragraph 2.
Paragraph 3.
Мы хотим сделать первый абзац больше, как своего рода «lede» или вступительный абзац. Вместо того, чтобы давать ему класс, мы можем использовать его :first-of-typeдля его выбора:
p:first-of-type ( font-size: 1.25em; )Использование :first-of-typeочень похоже на, :nth-childно с одним важным отличием: оно менее специфично. В приведенном выше примере, если бы мы использовали p:nth-child(1), ничего бы не произошло, потому что абзац не является первым дочерним элементом своего родителя (the ). В этом проявляется сила :first-of-type: он нацелен на определенный тип элемента в определенном расположении по отношению к аналогичным братьям и сестрам, а не ко всем братьям и сестрам.
Более полный пример ниже демонстрирует использование :first-of-typeи связанный с ним селектор псевдокласса :last-of-type.
Поддержка браузера
| Хром | Сафари | Fire Fox | Опера | IE | Android | iOS |
|---|---|---|---|---|---|---|
| Работает | 3.2+ | Работает | 9.5+ | 9+ | Работает | Работает |
:first-of-typeбыл представлен в модуле CSS Selectors Module 3, что означает, что старые версии браузеров его не поддерживают. Однако поддержка современных браузеров безупречна, а новые псевдоселекторы широко используются в производственных средах. Если вам требуется поддержка старых версий браузера, используйте polyfill для IE или используйте эти селекторы некритическими способами, например, с прогрессивным улучшением, что рекомендуется.