CSS: la differenza tra :first-child e :first-of-type

In questo articolo parleremo dell'importante differenza che esiste tra due selettori CSS il cui scopo è selezionare il primo elemento di una serie.

:first-child seleziona il primo discedente di un genitore se e solo se l'elemento compare nel sorgente come primo discendente a prescindere dal tipo.

Avendo questa struttura HTML:

<div class="parent">
  <p></p>
  <p class="special"></p>
  <p class="special"></p>
</div>  

Con :first-child possiamo scrivere:

.parent > p:first-child {
    color: green;
}

Otterremo l'effetto sperato, perchè l'unico elemento p senza la classe .special si trova nel sorgente esattamente nella posizione di primo discendente del suo genitore.

Se invece volessimo selezionare il primo elemento con classe .special a prescindere dalla sua posizione nel sorgente ma solo in virtù del fatto che ha tale classe, dobbiamo usare il selettore :first-of-type:

.parent .special:first-of-type {
    color: green;
}

In pratica con il primo selettore siamo vincolati all'ordine del sorgente mentre con il secondo il vincolo è quello di essere il primo elemento di una serie che ha determinate caratteristiche.