Il valore di specificità di una regola CSS può essere espresso sotto-forma di numero a quattro cifre. Come nel nostro sistema numerico, l’importanza delle cifre è ordinata da sinistra verso destra quindi un valore più alto indica una specificità più alta.
Come appena detto, il valore è costituito da un numero a quattro cifre. Data una specificità come la seguente:
a, b, c, d
le seguenti regole consentono di assegnare un valore ad ogni cifra, partendo da sinistra:
- Assegna valore 1 ad a se la regola è contenuta all’interno dell’attributo style, 0 altrimenti.
- Aggiungi 1 a b per ogni ID presente nella regola, 0 altrimenti.
- Aggiungi 1 a c per ogni classe, pseudo-classe e attributo presente nella regola, 0 altrimenti.
- Aggiungi 1 a d per ogni elemento e pseudo-elemento contenuto nella regola.
Prima di approfondire ed analizzare casi particolari, vediamo qualche esempio.
li {} /* a=0, b=0, c=0, d=1 –> 0001 */
ul li {} /* a=0, b=0, c=0, d=2 –> 0002 */
ul#menu li {} /* a=0, b=1, c=0, d=2 –> 0102 */
ul#menu li.active {} /* a=0, b=1, c=1, d=2 –> 0112 */
#menu {} /* a=0, b=1, c=0, d=0 -> 0100 */
style="color:red" /* a=1, b=0, c=0, d=0 –> 1000 */L’ultimo esempio che utilizza l’attributo style ha priorità su tutti gli altri. Ovviamente se si utilizza tale attributo non verranno assegnati altri valori alle restanti cifre in quanto non è possibile sfruttarle al suo interno.
Casi particolari ed esempi avanzati
Vediamo ora alcuni casi particolari fornendo anche degli esempi di regole più elaborate.
* /* a=0, b=0, c=0, d=0 -> 0000 */
li:first-line {} /* a=0, b=0, c=0, d=2 –> 0002 */
ul ol+li {} /* a=0, b=0, c=0, d=3 –> 0003 */
li.red.level {} /* a=0, b=0, c=2, d=1 –> 0021 */
h1 + *[rel=up] {} /* a=0, b=0, c=1, d=1 –> 0011 */Il primo esempio, il selettore universale, non ha alcuna specificità, ed il suo valore finale è 0.
La seconda riga contiene un elemento (d=1) e uno pseudo-elemento (d=1+1=2) quindi entrambi andranno ad incrementare il valore dell’ultima cifra lasciando inalterate le altre. Il risultato finale è 2.
La terza riga contiene due classi (c=1+1=2) e un elemento (d=1) quindi il valore finale sarà 12.
L’ultimo esempio contiene un elemento (d=1), un selettore * che non ha valore e una pseudo-classe (c=1). Il risultato finale è 11.
Vediamo altri esempi più elaborati di quelli appena visti. Il sistema è sempre lo stesso ma possiamo utilizzare questi esempi come semplice esercitazione.
body #wrapper p.author a#link span:hover {}
#header *:not(ol) li:focus {}
ul li ul li ol li:first-letter {}
ul > li.active a[title] {}
ul > li.active a[href] {}Nel primo esempio abbiamo 4 elementi (d=1+1+1+1=4), due ID (b=1+1=2), una classe (c=1) e una pseudo-classe (c=1+1=2). Il risultato finale sarà: 0224.
Nel secondo esempio abbiamo un ID (b=1), un elemento (d=1), due pseudo-classi (c=1+1=2) e un selettore * che non ha specificità. Il risultato finale è: 0121.
Il terzo esempio è molto più semplice dei precedenti. Ci sono 7 elementi (d=7) e uno pseudo-elemento (d=7+1=8). La specificità è 0008.
Gli ultimi due esempi sono del tutto identici. Contengono 3 elementi (d=1+1+1=3), una classe (c=1) e un attributo (c=1+1=2). Il risultato è: 0023.
Un metodo semplice per calcolare il valore di specificità
Abbiamo visto finora che assegnare il valore di specificità non è complicato ma richiede solo un minimo di attenzione. Anzichè utilizzare le quattro variabili che abbiamo appena visto, possiamo utilizzare un metodo più semplice ed efficace per giungere al risultato finale.
Consideriamo le quattro cifre come nel nostro sistema numerico dove la cifra a sinistra è la più significativa. Possiamo assegnare i seguenti valori, a seconda della cifra:
- Assegna 1000 se la regola è contenuta all’interno dell’attributo style, 0 altrimenti.
- Aggiungi 100 per ogni ID presente nella regola, 0 altrimenti.
- Aggiungi 10 per ogni classe, pseudo-classe e attributo presente nella regola, 0 altrimenti.
- Aggiungi 1 per ogni elemento e pseudo-elemento contenuto nella regola.
Dopo tutto è quello che abbiamo fatto finora, nulla di nuovo. Semplicemente un metodo per calcolare più velocemente la specificità. Vediamo un ultimo esempio applicando il metodo appena visto.
#container ul#menu li.active ul li:hover {}Procedendo da sinistra verso destra, la somma e quindi il valore di specificità, utilizzando il metodo appena visto sarebbe:
100 (#container) + 1 (ul) + 100 (#menu) + 1 (li) + 10 (.active) + 1 (ul) + 1 (li) + 10 (:hover) = 0224.