:first-of-typeVolič CSS vám umožní zamerať sa na prvý výskyt prvku v rámci svojho kontajnera. Je definovaný v špecifikácii CSS Selectors úrovne 3 ako „štrukturálna pseudotrieda“, čo znamená, že sa používa na štýlovanie obsahu na základe jeho vzťahu s nadradeným a súrodeneckým obsahom.
Predpokladajme, že máme článok s nadpisom a niekoľkými odsekmi:
Paragraph 1.
Paragraph 2.
Paragraph 3.
Chceme zväčšiť prvý odsek ako akýsi „lede“ alebo úvodný odsek. Namiesto toho, aby sme mu dali triedu, môžeme ho :first-of-typezvoliť:
p:first-of-type ( font-size: 1.25em; )Používanie :first-of-typeje veľmi podobné, :nth-childale má jeden zásadný rozdiel: je menej konkrétne. V uvedenom príklade, ak by sme použili p:nth-child(1), by sa nič nestalo, pretože odsek nie je prvým dieťaťom jeho rodiča . To odhaľuje silu :first-of-type: zameriava sa na konkrétny typ prvku v konkrétnom usporiadaní vo vzťahu k podobným súrodencom, nie na všetkých súrodencov.
Nižšie uvedený úplnejší príklad ukazuje použitie :first-of-typea súvisiace volič pseudo-triedy, :last-of-type.
Podpora prehľadávača
| Chrome | Safari | Firefox | Opera | IE | Android | iOS |
|---|---|---|---|---|---|---|
| Tvorba | 3,2+ | Tvorba | 9,5+ | 9+ | Tvorba | Tvorba |
:first-of-typebol predstavený v CSS Selectors Module 3, čo znamená, že staré verzie prehľadávačov ho nepodporujú. Avšak moderná podpora prehľadávačov je dokonalá a nové pseudo-selektory sa široko používajú v produkčných prostrediach. Ak požadujete podporu starších prehliadačov, buď polyfill pre IE, alebo použite tieto selektory nekritickými spôsobmi á la progresívne vylepšenie, ktoré sa odporúča.