:first-of-typeСелектор у ЦСС-у вам омогућава да циљате први појаву једног елемента у оквиру своје посуде. Дефинисан је у спецификацији ЦСС Селецторс Левел 3 као „структурна псеудо-класа“, што значи да се користи за обликовање садржаја на основу односа са родитељским садржајем и садржајем.
Претпоставимо да имамо чланак са насловом и неколико пасуса:
Paragraph 1.
Paragraph 2.
Paragraph 3.
Први пасус желимо да повећамо, као неку врсту „леде“ или уводног пасуса. Уместо да му дамо класу, можемо је користити :first-of-typeза избор:
p:first-of-type ( font-size: 1.25em; )Употреба :first-of-typeје врло слична, :nth-childали са једном критичном разликом: мање је специфична. У горњем примеру, да смо користили p:nth-child(1), ништа се не би догодило јер одломак није прво дете његовог родитеља (тхе ). Ово открива моћ :first-of-type: циља одређену врсту елемента у одређеном аранжману у односу на сличну браћу и сестре, а не на сву браћу и сестре.
Што више цомплете Пример испод показује употребу :first-of-typeи повезане селектор псеудо-класе, :last-of-type.
Подршка прегледача
| Хром | Сафари | Фирефок | Опера | ИЕ | Андроид | иОС |
|---|---|---|---|---|---|---|
| Извођење радова | 3.2+ | Извођење радова | 9.5+ | 9+ | Извођење радова | Извођење радова |
:first-of-typeје представљен у ЦСС Селецторс Модуле 3, што значи да га старе верзије прегледача не подржавају. Међутим, савремена подршка за прегледаче је беспрекорна, а нови псеудо-селектори се широко користе у производним окружењима. Ако вам је потребна старија подршка за прегледач, или полифил за ИЕ, или користите ове бираче на некритичне начине, уз прогресивно побољшање, што се препоручује.