:last-childValitsin voit kohdistaa viimeiseen elementtiin suoraan sisälle sen sisältävä elementti. Se määritellään CSS Selectors -tason 3 spesifikaatiossa "rakenteelliseksi pseudoluokaksi", mikä tarkoittaa, että sitä käytetään sisällön tyylinmuokkaamiseen sen mukaan, mikä on sen suhde vanhempien ja sisarusten sisältöön.
Oletetaan, että meillä on artikkeli ja haluamme pienentää viimeistä kappaletta toimimaan sisällön päätelmänä (kuten toimittajan huomautus):
Lorem ipsum…
Dolor sit amet…
Consectetur adipisicing…
Last paragraph…
Luokan (esim. .last) Käyttämisen sijaan voimme :last-childvalita sen:
p:last-child ( font-size: 0.75em; )Käyttäminen :last-childon hyvin samanlaista kuin :last-of-typeyhdellä kriittisellä erolla: se on vähemmän spesifinen. :last-childyrittää sovittaa vain vanhemman elementin viimeisen alatason, kun taas last-of-typevastaamaan määritetyn elementin viimeistä esiintymää, vaikka se ei olisikaan viimeinen HTML-koodissa. Yllä olevassa esimerkissä lopputulos olisi sama, koska myös viimeinen lapsi articlesattuu olemaan viimeinen pelementti. Tämä paljastaa voiman :last-child: se voi tunnistaa elementin suhteessa kaikkiin sisaruksiinsa, ei vain saman tyyppisiin sisaruksiin.
Täydellisempi esimerkki alla osoittaa käytön :last-childja siihen liittyvän pseudoluokan valitsimen :first-child.
Selaimen tuki
| Kromi | Safari | Firefox | Ooppera | IE | Android | iOS |
|---|---|---|---|---|---|---|
| Minkä tahansa | 3.2+ | Minkä tahansa | 9,5+ | 9+ | Minkä tahansa | Minkä tahansa |
:last-childesiteltiin CSS Selectors -moduulissa 3, mikä tarkoittaa, että selainten vanhat versiot eivät tue sitä. Nykyaikainen selaintuki on kuitenkin moitteetonta, ja uusia pseudovalitsimia käytetään laajalti tuotantoympäristöissä. Jos tarvitset vanhempaa selaintukea, joko polyfill IE: lle tai käytä näitä valitsimia ei-kriittisillä tavoilla á la progressive enhancement, mikä on suositeltavaa.