:first-child

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.