Den :last-childvælgeren giver dig mulighed for at målrette det sidste element direkte inde i sin indeholdte elementer. Det er defineret i CSS Selectors niveau 3-specifikation som en "strukturel pseudoklasse", hvilket betyder at den bruges til at style indhold baseret på dets forhold til overordnet og søskendeindhold.
Antag at vi har en artikel og ønsker at gøre det sidste afsnit mindre for at fungere som en konklusion på indholdet (som en redaktørens note):
Lorem ipsum…
Dolor sit amet…
Consectetur adipisicing…
Last paragraph…
I stedet for at bruge en klasse (f.eks. .last) Kan vi bruge den :last-childtil at vælge den:
p:last-child ( font-size: 0.75em; )Brug :last-childligner meget, :last-of-typemen med en kritisk forskel: det er mindre specifikt. :last-childvil kun forsøge at matche det sidste barn af et overordnet element, mens det last-of-typevil matche den sidste forekomst af et angivet element, selvom det ikke kommer død sidst i HTML. I eksemplet ovenfor ville resultatet være det samme, kun fordi det sidste barn af articleogså tilfældigvis er det sidste pelement. Dette afslører styrken ved :last-child: det kan identificere et element i forhold til alle dets søskende, ikke kun søskende af samme type.
Det mere komplette eksempel nedenfor viser brugen af :last-childog en relateret pseudoklassevælger :first-child.
Browsersupport
| Chrome | Safari | Firefox | Opera | IE | Android | iOS |
|---|---|---|---|---|---|---|
| Nogen | 3.2+ | Nogen | 9.5+ | 9+ | Nogen | Nogen |
:last-childblev introduceret i CSS Selectors Module 3, hvilket betyder, at gamle versioner af browsere ikke understøtter det. Imidlertid er moderne browsersupport upåklagelig, og de nye pseudovælgere bruges i vid udstrækning i produktionsmiljøer. Hvis du har brug for ældre browsersupport, skal du enten udfylde til IE eller bruge disse vælgere på ikke-kritiske måder á la progressiv forbedring, hvilket anbefales.