:first-of-typeSelektor v CSS omogoča ciljanje prvi nastop elementa v posode. V specifikaciji CSS Selectors Level 3 je opredeljen kot "strukturni psevdorazred", kar pomeni, da se uporablja za oblikovanje vsebine glede na njen odnos z nadrejeno in sorojensko vsebino.
Recimo, da imamo članek z naslovom in več odstavki:
Paragraph 1.
Paragraph 2.
Paragraph 3.
Prvi odstavek želimo povečati kot nekakšen »lede« ali uvodni odstavek. Namesto da bi mu predali razred, ga lahko uporabimo :first-of-typeza izbiro:
p:first-of-type ( font-size: 1.25em; )Uporaba :first-of-typeje zelo podobna, :nth-childvendar z eno kritično razliko: je manj specifična. V zgornjem primeru se, če bi uporabili p:nth-child(1), ne bi zgodilo nič, ker odstavek ni prvi podrejen njegovega starša (the ). To razkriva moč :first-of-type: cilja na določeno vrsto elementa v določeni ureditvi glede na podobne brate in sestre, ne na vse brate in sestre.
Spodnji bolj popoln primer prikazuje uporabo :first-of-typein s tem povezano izbiro psevdo-razreda, :last-of-type.
Podpora za brskalnik
| Chrome | Safari | Firefox | Opera | IE | Android | iOS |
|---|---|---|---|---|---|---|
| Deluje | 3,2+ | Deluje | 9,5+ | 9+ | Deluje | Deluje |
:first-of-typeje bil uveden v modulu CSS Selectors 3, kar pomeni, da ga stare različice brskalnikov ne podpirajo. Vendar je sodobna podpora za brskalnike brezhibna, novi psevdo-izbirniki pa se pogosto uporabljajo v produkcijskih okoljih. Če potrebujete podporo za starejši brskalnik, bodisi polyfill za IE bodisi uporabite te izbirnike na nekritične načine - postopno izboljšanje, kar je priporočljivo.