Den :last-childvelgeren kan du målrette det siste elementet direkte i sin inneholder element. Det er definert i CSS Selectors Level 3-spesifikasjonen som en "strukturell pseudoklasse", noe som betyr at den brukes til å style innhold basert på forholdet til foreldre- og søskeninnhold.
Anta at vi har en artikkel og ønsker å gjøre det siste avsnittet mindre, for å fungere som en konklusjon på innholdet (som en red.anm.):
Lorem ipsum…
Dolor sit amet…
Consectetur adipisicing…
Last paragraph…
I stedet for å bruke en klasse (f.eks. .last), Kan vi bruke den :last-childtil å velge den:
p:last-child ( font-size: 0.75em; )Bruk :last-childer veldig lik :last-of-typemen med en kritisk forskjell: den er mindre spesifikk. :last-childvil bare prøve å matche det siste barnet til et overordnet element, mens det last-of-typevil matche den siste forekomsten av et spesifisert element, selv om det ikke kommer død sist i HTML. I eksemplet ovenfor vil utfallet være det samme, bare fordi det siste barnet til articletilfeldigvis også er det siste pelementet. Dette avslører kraften til :last-child: den kan identifisere et element i forhold til alle søsknene, ikke bare søsken av samme type.
Jo mer komplett eksempel nedenfor demonstrerer bruk av :last-childog en beslektet pseudo-klasse selector, :first-child.
Nettleserstøtte
| Chrome | Safari | Firefox | Opera | DVS | Android | iOS |
|---|---|---|---|---|---|---|
| Noen | 3.2+ | Noen | 9.5+ | 9+ | Noen | Noen |
:last-childble introdusert i CSS Selectors Module 3, som betyr at gamle versjoner av nettlesere ikke støtter det. Imidlertid er moderne nettleserstøtte upåklagelig, og de nye pseudovelgerne er mye brukt i produksjonsmiljøer. Hvis du trenger eldre nettleserstøtte, kan du enten fylle ut for IE, eller bruke disse velgerne på ikke-kritiske måter, på en progressiv forbedring, noe som anbefales.