:first-of-typeSelektor u CSS vam omogućuje ciljanje prvog nastanak elementa u kontejneru. U specifikaciji CSS Selectors Level 3 definiran je kao „strukturna pseudo-klasa“, što znači da se koristi za oblikovanje sadržaja na temelju odnosa s roditeljskim sadržajem i sadržajem.
Pretpostavimo da imamo članak s naslovom i nekoliko odlomaka:
Paragraph 1.
Paragraph 2.
Paragraph 3.
Prvi odlomak želimo povećati kao svojevrsni "lede" ili uvodni odlomak. Umjesto da mu damo klasu, možemo je koristiti :first-of-typeza odabir:
p:first-of-type ( font-size: 1.25em; )Korištenje :first-of-typeje vrlo slično, :nth-childali s jednom kritičnom razlikom: manje je specifično. U gornjem primjeru, da smo koristili p:nth-child(1), ništa se ne bi dogodilo jer odlomak nije prvo dijete njegovog roditelja (the ). Ovo otkriva moć :first-of-type: cilja određenu vrstu elementa u određenom rasporedu u odnosu na sličnu braću i sestre, a ne na svu braću i sestre.
Što više kompletan primjer u nastavku pokazuje uporabu :first-of-typei srodne selektor pseudo-klase, :last-of-type.
Podrška preglednika
| Krom | Safari | Firefox | Opera | IE | Android | iOS |
|---|---|---|---|---|---|---|
| Djela | 3,2+ | Djela | 9,5+ | 9+ | Djela | Djela |
:first-of-typeuveden je u CSS Selectors Module 3, što znači da ga stare verzije preglednika ne podržavaju. Međutim, moderna podrška za preglednike je besprijekorna, a novi pseudo-selektori široko se koriste u proizvodnim okruženjima. Ako vam je potrebna starija podrška za preglednik, ili polifil za IE, ili ove selektore koristite na nekritične načine, progresivno poboljšanje, što se preporučuje.