CSS Specificity

In questo articolo cercheremo di capire come le regole dei CSS interagiscono tra loro. Se si dispone di due (o più) regole CSS in conflitto, che finiscono quindi per puntare sullo stesso elemento, ci sono alcune norme di base che un browser segue per determinare quella che è la più specifica e quindi vince.
La SPECIFICITY è una rappresentazione numerica della specificità di un selettore. Ci sono tre cose che vengono utilizzate per determinare la specificità di un selettore:

1. Ogni elemento e pseudo-elemento vale 0,0,0,1.
2. Ogni classe, pseudo-classe, o selettore attributo vale 0,0,1,0.
3. Ogni selettore ID vale 0,1,0,0.

Qualche esempio

Detto questo, il concetto probabilmente potrebbe non risultare ancora molto chiaro…. Vediamo qualche esempio per schiarirci le idee:

• div ul li span -> Quattro selettori di tipo (elementi) -> 0,0,0,4
• div.nav ul li -> Un selettore di classe, tre elementi ->0,0,1,3
• a:active -> Una pseudo-classe, un elemento -> 0,0,1,1
• div.modulo input:focus -> Una pseudo-classe, una classe, due elementi -> 0,0,2,2
• #header ul -> Un selettore ID, un elemento -> 0,1,0,1
• div#footer ul -> Un selettore ID, due elementi -> 0,1,0,2

Queso dovrebbe iniziare a darci un’idea di come i valori di specificità sono costruiti.
Ma, perché le virgole? Perchè ogni “livello” del valore di specificità è a sé stante. Così, per esempio, un selettore di classe ha una maggiore specificità di 11 selettori di tipo. In questo caso, i loro valori sarebbero:

• .nav -> 0,0,1,0
• div table tbody tr td div ul li ol li span -> 0,0,0,11

L’1 nella terza posizione del primo selettore batte lo 0 nella terza posizione del secondo selettore. Infatti, in questo esempio, l’11 in quarta posizione del secondo selettore non significa nulla.
I separatori virgola aiutano a mantenere chiaro questo concetto, altrimenti, i valori di specificità dei due selettori potrebbero essere scritti come 10 ed 11, che potrebbe portare alla erronea impressione che il secondo è più specifico del primo.

Vicinanza strutturale

Attenzione, c’è un altro errore piuttosto comune, che riguarda la vicinanza strutturale di specificità. Come al solito un esempio chiarisce tutto, supponiamo di scrivere quanto segue:

• ul li {font-style: normal;}
• html li {font-style: italic;}

Chi vince? Entrambi hanno due selettori di tipo, il che significa che entrambi hanno specificità di 0,0,0,2.
A prima vista si potrebbe pensare che il fatto che l’elemento ul sia più vicino all’elemento li nella struttura del documento rispetto all’elemento html abbia importanza. Ma non è così.
La specificità è un valore numerico diretto. Che non valuta la struttura della pagina in alcun modo.
Quindi la regola è che l’ultima regola vince quando le specificità sono uguali.

Il primo zero

Probabilmente vi state chiedendo che cosa rappresenta il primo zero nella notazione di specificità, dato che finora abbiamo preso in considerazione soltanto gli ultimi tre. Esso, è utilizzato per gli stili inline. Pertanto, dato il seguente stile e markup, lo sfondo del div sarà rosso.

• div#header {background: yellow;} -> 0,1,0,0
• <div id="header" style="background: red;"> 1,0,0,0

Calcolo alternativo

Se qualcuno dovesse avere problemi a capire i rapporti di specificità attraverso questa notazione può sempre utilizzare questa banale semplificazione:

1. ogni selettore di tipo e pseudo-elemento ha specificità pari a 1
2. ogni classe, pseudo-classe e selettore di attributo ha specificità pari a 10
3. ogni selettore ID ha specificità pari a 100

Come possiamo notare cambiano le regole di “assegnazione dei punteggi” ma il risultato non cambia. 😉