В :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,.
Поддръжка на браузър
| Chrome | Сафари | Firefox | Опера | IE | Android | iOS |
|---|---|---|---|---|---|---|
| Върши работа | 3.2+ | Върши работа | 9,5+ | 9+ | Върши работа | Върши работа |
:first-of-typeбеше въведен в CSS Selectors Module 3, което означава, че старите версии на браузърите не го поддържат. Съвременната поддръжка на браузъра обаче е безупречна и новите псевдоселектори се използват широко в производствените среди. Ако се нуждаете от по-стара поддръжка на браузъра, или polyfill за IE, или използвайте тези селектори по некритични начини - прогресивно подобрение, което се препоръчва.