Il :first-childselettore consente di indirizzare il primo elemento immediatamente all'interno di un altro elemento. È 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 ingrandire il primo paragrafo, come una "lede" o una parte di testo introduttivo:
First paragraph…
Lorem ipsum…
Dolor sit amet…
Consectetur adipisicing…
Invece di dargli una classe (ad esempio .first), possiamo usare :first-childper selezionarlo:
p:first-child ( font-size: 1.5em; )L'utilizzo :first-childè molto simile :first-of-typema con una differenza fondamentale: è meno specifico. :first-childcercherà solo di abbinare il primo figlio immediato di un elemento genitore, mentre first-of-typecorrisponderà alla prima occorrenza di un elemento specificato, anche se non viene assolutamente prima nell'HTML. Nell'esempio sopra il risultato sarebbe lo stesso, solo perché anche il primo figlio di articleè il primo pelemento. Questo rivela il potere di :first-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 :first-childe un relativo selettore pseudo-classe, :last-child.
Supporto browser
| Cromo | Safari | Firefox | musica lirica | IE | Android | iOS |
|---|---|---|---|---|---|---|
| Qualunque | 3.2+ | Qualunque | 9.5+ | 9+ | Qualunque | Qualunque |
:first-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.