In questo articolo affronteremo un aspetto fondamentale dello standard CSS, ossia il calcolo della specificità dei selettori. Si tratta di un argomento da cui dipende il successo o il fallimento nell'applicazione delle nostre regole di stile.
La specificità di un selettore si calcola come segue:
si conti 1 se il selettore è un attributo
style, altrimenti 0 (=a). Nell'HTML, i valori dell'attributostylesono regole di stile, così avremo: a=1, b=0, c=0, d=0.si conti il numero di attributi
idnel selettore (=b)si conti il numero di altri attributi e pseudo-classi nel selettore (=c)
si conti il numero di nomi di elemento e pseudo-elementi nel selettore (=d)
Concatenando i quattro numeri (a, b, c, d) in serie, in un ordine di precedenza decrescente che va da sinistra a destra e confrontando quindi i numeri da sinistra a destra, otteniamo la specificità di un selettore. Esempi:
* { } /* a=0 b=0 c=0 d=0
specificità = 0, 0, 0, 0 */
p { } /* a=0 b=0 c=0 d=1
specificità = 0, 0, 0, 1 */
#id { } /* a=0 b=1 c=0 d=0
specificità = 0, 1, 0, 0 */
style=" " /* a=1, b=0 c=0 d=0
specificità = 1, 0, 0, 0 */
Si tenga presente che i valori posti più a sinistra vincono su quelli posti più a destra, a prescindere
dal numero di valori. Quindi se anche
l'elemento p avesse avuto quattro valori su d (per esempio con una concatenazione di selettori del discendente come
body div div p { }) non sarebbe riuscito a vincere né su #id nè su style,
i quali hanno i loro valori posti più a sinistra superiori
ai corrispondenti valori dell'elemento p (a=1 e b=1 per i primi,
contro a=0 e b=0 per il secondo). L'attributo style ha una specificità superiore agli
altri perché è l'unico ad avere il valore posto più a sinistra (a=1) superiore agli altri (a=0).