:last-childVolič vám umožní zaměřit se na poslední prvek přímo do svého obsahující prvek. Ve specifikaci CSS Selectors Level 3 je definována jako „strukturní pseudotřída“, což znamená, že se používá ke stylování obsahu na základě jeho vztahu s nadřazeným a sourozeneckým obsahem.
Předpokládejme, že máme článek a chceme zmenšit poslední odstavec, aby fungoval jako závěr obsahu (jako poznámka editora):
Lorem ipsum…
Dolor sit amet…
Consectetur adipisicing…
Last paragraph…
Místo použití třídy (např. .last) Ji můžeme :last-childvybrat:
p:last-child ( font-size: 0.75em; )Použití :last-childje velmi podobné, :last-of-typeale s jedním zásadním rozdílem: je méně konkrétní. :last-childse pokusí porovnat pouze poslední podřízený prvek nadřazeného prvku, zatímco last-of-typebude odpovídat poslednímu výskytu určeného prvku, i když v HTML nebude mrtvý jako poslední. Ve výše uvedeném příkladu by byl výsledek stejný, jen proto, articleže posledním pprvkem je také poslední prvek. To odhaluje sílu :last-child: může identifikovat prvek ve vztahu ke všem svým sourozencům, nejen k sourozencům stejného typu.
Níže uvedený úplnější příklad ukazuje použití :last-childa související volič pseudo-třídy, :first-child.
Podpora prohlížeče
| Chrome | Safari | Firefox | Opera | TJ | Android | iOS |
|---|---|---|---|---|---|---|
| Žádný | 3,2+ | Žádný | 9,5+ | 9+ | Žádný | Žádný |
:last-childbyl představen v modulu CSS Selectors Module 3, což znamená, že staré verze prohlížečů jej nepodporují. Podpora moderních prohlížečů je však dokonalá a nové pseudo-selektory jsou široce používány v produkčním prostředí. Pokud požadujete podporu starších prohlížečů, buď polyfill pro IE, nebo použijte tyto selektory nekritickými způsoby á la progresivní vylepšení, které se doporučuje.