Met de :last-childselector kunt u het laatste element direct in het element dat het bevat, targeten. Het wordt in de CSS Selectors Level 3-specificatie gedefinieerd als een "structurele pseudo-klasse", wat betekent dat het wordt gebruikt om inhoud op te maken op basis van de relatie met inhoud van ouders en broers en zussen.
Stel dat we een artikel hebben en de laatste alinea kleiner willen maken, als afsluiting van de inhoud (zoals een opmerking van een redacteur):
Lorem ipsum…
Dolor sit amet…
Consectetur adipisicing…
Last paragraph…
In plaats van een klasse te gebruiken (bijv. .last), Kunnen we deze gebruiken :last-childom deze te selecteren:
p:last-child ( font-size: 0.75em; )Het gebruik :last-childlijkt erg op, :last-of-typemaar met één cruciaal verschil: het is minder specifiek. :last-childzal alleen proberen om het allerlaatste kind van een bovenliggend element last-of-typete matchen , terwijl het zal matchen met het laatste exemplaar van een gespecificeerd element, zelfs als het niet als laatste voorkomt in de HTML. In het bovenstaande voorbeeld zou de uitkomst hetzelfde zijn, alleen omdat het laatste kind van de articleook het laatste pelement is. Dit onthult de kracht van :last-child: het kan een element identificeren met betrekking tot al zijn broers en zussen, niet alleen broers en zussen van hetzelfde type.
Het onderstaande meer volledig voorbeeld toont het gebruik van :last-childen een verwante pseudo-class selector :first-child.
Browser-ondersteuning
| Chrome | Safari | Firefox | Opera | D.W.Z | Android | iOS |
|---|---|---|---|---|---|---|
| Ieder | 3.2+ | Ieder | 9.5+ | 9+ | Ieder | Ieder |
:last-childwerd geïntroduceerd in CSS Selectors Module 3, wat betekent dat oude versies van browsers dit niet ondersteunen. De moderne browserondersteuning is echter onberispelijk en de nieuwe pseudo-selectors worden veel gebruikt in productieomgevingen. Als u oudere browserondersteuning nodig heeft, gebruik dan polyfill voor IE, of gebruik deze selectors op niet-kritieke manieren, zoals progressieve verbetering, wat wordt aanbevolen.