Il :last-childselettore consente di indirizzare l'ultimo elemento direttamente all'interno del suo elemento contenitore. È definito nella specifica CSS Selectors Level 3 come una "pseudo-classe strutturale", il che significa che viene utilizzato per definire lo stile del contenuto in base alla sua relazione con il contenuto padre e fratello.
Supponiamo di avere un articolo e di voler rimpicciolire l'ultimo paragrafo, per fungere da conclusione al contenuto (come una nota del redattore):
Lorem ipsum…
Dolor sit amet…
Consectetur adipisicing…
Last paragraph…
Invece di usare una classe (ad esempio .last), possiamo usarla :last-childper selezionarla:
p:last-child ( font-size: 0.75em; )L'utilizzo :last-childè molto simile :last-of-typema con una differenza fondamentale: è meno specifico. :last-childproverà solo a far corrispondere l'ultimo figlio di un elemento genitore, mentre last-of-typecorrisponderà all'ultima occorrenza di un elemento specificato, anche se non è morto per ultimo nell'HTML. Nell'esempio sopra il risultato sarebbe lo stesso, solo perché anche l'ultimo figlio di articleè l'ultimo pelemento. Questo rivela il potere di :last-child: può identificare un elemento in relazione a tutti i suoi fratelli, non solo fratelli dello stesso tipo.
L'esempio più completo di seguito illustrato l'utilizzo di :last-childe un relativo selettore pseudo-classe, :first-child.
Supporto browser
| Cromo | Safari | Firefox | musica lirica | IE | Android | iOS |
|---|---|---|---|---|---|---|
| Qualunque | 3.2+ | Qualunque | 9.5+ | 9+ | Qualunque | Qualunque |
:last-childè stato introdotto nel modulo 3 dei selettori CSS, il che significa che le vecchie versioni dei browser non lo supportano. Tuttavia, il supporto del browser moderno è impeccabile ei nuovi pseudo-selettori sono ampiamente utilizzati negli ambienti di produzione. Se è necessario il supporto di browser meno recenti, utilizzare polyfill per IE o utilizzare questi selettori in modi non critici, come consigliato dal miglioramento progressivo.