:last-childVolič vám umožní zamerať sa na posledný prvok priamo do svojho obsahujúcej prvok. 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 zmenšiť posledný odsek, ktorý slúži ako záver obsahu (napríklad poznámka redaktora):
Lorem ipsum…
Dolor sit amet…
Consectetur adipisicing…
Last paragraph…
Namiesto použitia triedy (napr. .last) Ju môžeme :last-childzvoliť:
p:last-child ( font-size: 0.75em; )Používanie :last-childje veľmi podobné, :last-of-typeale má jeden zásadný rozdiel: je menej konkrétne. :last-childsa pokúsi zhodovať iba s posledným potomkom nadradeného prvku, zatiaľ čo last-of-types posledným výskytom zadaného prvku sa bude zhodovať, aj keď v HTML nebude mŕtvy ako posledný. V príklade vyššie bude výsledok rovnaký, len preto, že posledným potomkom je articleaj posledné dieťa p. To odhaľuje silu :last-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 :last-childa súvisiace volič pseudo-triedy, :first-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 |
:last-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.