Med :last-childväljaren kan du rikta in det sista elementet direkt inuti det innehållande elementet. Det definieras i CSS Selectors nivå 3-specifikationen som en "strukturell pseudoklass", vilket betyder att den används för att utforma innehåll baserat på dess förhållande till föräldra- och syskoninnehåll.
Antag att vi har en artikel och vill göra det sista stycket mindre, för att fungera som en slutsats för innehållet (som en redigeringsanmärkning):
Lorem ipsum…
Dolor sit amet…
Consectetur adipisicing…
Last paragraph…
I stället för att använda en klass (t.ex. .last) kan vi använda den för :last-childatt välja den:
p:last-child ( font-size: 0.75em; )Användning :last-childär mycket lik :last-of-typemen med en kritisk skillnad: det är mindre specifikt. :last-childförsöker bara matcha det allra sista barnet till ett överordnat element, medan det last-of-typematchar den sista förekomsten av ett angivet element, även om det inte kommer död sist i HTML. I exemplet ovan skulle resultatet bli detsamma, bara för att det sista barnet till det articleockså råkar vara det sista pelementet. Detta avslöjar kraften i :last-child: den kan identifiera ett element i förhållande till alla sina syskon, inte bara syskon av samma typ.
Ju mer komplett exemplet nedan visar användningen av :last-childoch en relaterad pseudoklassväljare :first-child.
Webbläsarstöd
| Krom | Safari | Firefox | Opera | IE | Android | iOS |
|---|---|---|---|---|---|---|
| Några | 3.2+ | Några | 9,5+ | 9+ | Några | Några |
:last-childintroducerades i CSS Selectors Module 3, vilket innebär att gamla versioner av webbläsare inte stöder det. Modernt webbläsarsupport är dock oklanderligt och de nya pseudoväljarna används ofta i produktionsmiljöer. Om du behöver äldre webbläsarsupport, antingen polyfill för IE, eller använd dessa väljare på icke-kritiska sätt på en progressiv förbättring, vilket rekommenderas.