:first-childVolič vám umožní zamerať sa na prvý prvok bezprostredne vnútri iného prvku. 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 a chceme zväčšiť prvý odsek - napríklad „lede“ alebo úvodný text:
First paragraph…
Lorem ipsum…
Dolor sit amet…
Consectetur adipisicing…
Namiesto toho, aby sme mu dali triedu (napr. .first), Môžeme ju :first-childzvoliť:
p:first-child ( font-size: 1.5em; )Používanie :first-childje veľmi podobné, :first-of-typeale má jeden zásadný rozdiel: je menej konkrétne. :first-childsa pokúsi iba zhodovať s okamžitým prvým potomkom nadradeného prvku, zatiaľ čo first-of-types prvým výskytom zadaného prvku sa zhoduje, aj keď v HTML nie je úplne prvý. V príklade vyššie by bol výsledok rovnaký, len preto, že prvým dieťaťom je articletiež prvé dieťa p. To odhaľuje silu :first-child: dokáže identifikovať prvok vo vzťahu ku všetkým svojim súrodencom, nielen k súrodencom rovnakého typu.
Nižšie uvedený úplnejší príklad ukazuje použitie :first-childa súvisiace volič pseudo-triedy, :last-child.
Podpora prehľadávača
| Chrome | Safari | Firefox | Opera | IE | Android | iOS |
|---|---|---|---|---|---|---|
| akýkoľvek | 3,2+ | akýkoľvek | 9,5+ | 9+ | akýkoľvek | akýkoľvek |
:first-childbol 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.