Il selettore :first-child può essere utilizzato per applicare uno stile al primo elemento contenuto immediatamente all’interno di un altro elemento. Viene definito nella specifica CSS come una “pseudo-classe strutturale”, quindi viene utilizzata per applicare regole di stile ad un elemento in base alla sua relazione con il contenuto genitore o fratello.
Supponiamo di avere una lista e di voler modificare lo stile del primo elemento per indicare, per esempio, l’ultimo elemento aggiunto o il più importante:
<ul>
<li>Primo elemento</li>
<li>Secondo elemento</li>
<li>Terzo elemento</li>
<li>Quarto elemento</li>
</ul>Invece di assegnare una classe o un id all’elemento, possiamo utilizzare il selettore :first-child per applicare delle regole solo ad esso:
li:first-child {
font-size: 150%;
font-weight: bold;
text-color: red;
}Il comportamento di :first-child è molto simile a :first-of-type ma è meno specifico. Mentre :first-child seleziona solamente il primo elemento figlio immediatamente contenuto in un elemento genitore, :first-of-type seleziona la prima occorrenza di un determinato elemento. Nell’esempio sopra il risultato sarebbe lo stesso, ma solo perché è anche la prima volta che un elemento <li> si trova nel documento HTML.
Capiamo quindi che :first-child può essere utilizzato per identificare un elemento in relazione a tutti i suoi fratelli parigrado, e non solo a parigrado dello stesso tipo.
Supporto dei Browser
Il selettore :first-child è stato introdotto con CSS3, quindi le versioni più vecchie dei browser non lo supportano, per questo è possibile utilizzare un Polyfill per Internet Explorer.