Specificità: criteri di scelta dei browser in caso elementi CSS in conflitto

Pubblicato il 22/02/2008 da Matteo Moro in analisi, css, teoria

Nel momento in cui abbiamo diverse regole CSS che si applicano a uno stesso elemento della pagina, il browser deve fare una scelta per decidere quale stile applicare. Nel caso di pagine semplici, è probabile che non ci si trovi mai in questa situazione: con l’aumentare della complessità delle pagine, aumenta di conseguenza anche la possibilità che più regole CSS si sovrappongano. E’ bene, quindi, capire quali sono le regole che stanno alla base delle scelte dei browser, in modo da non trovarci in situazioni spiacevoli.

Calcolare la specificità

Stiles Street
Quando si trova a dover scegliere, il browser calcola la specificità delle regole che si sovrappongono, e applica quella con il valore più alto. Nel calcolo della specificità, entrano in gioco diversi fattori: il numero di elementi HTML, di classi e ID presenti nella regola stessa. Ad ognuno di questi elementi viene assegnato un valore e alla fine si fa la somma, ottenendo così il valore della specificità. Nel caso in cui tale valore fosse uguale, verrà utilizzato l’ultima regola definita:

Elemento HTML: 1
Elemendo CLASSE: 10
Elemento ID: 100

In base alle regole definite in precedenza, analizziamo alcuni casi concreti per capire, nella pratica, il valore della specificità per regole CSS diverse:

p: 1 (1xHTML)
div p: 2 (2xHTML)
.tree: 10 (1xCLASSE)
div p.tree: 12 (1xCLASSE + 1xHTML)
#baobab: 100 (1xID)
body #content .alternative p: 112 (1xID + 1xCLASSE + 2xHTML)

CREDITS

I contenuti di questo articolo arrivano da “Specificity“, pubblicato su HTML Dog.
L’immagine utilizzata nell’articolo è stata pubblicata da “waving at you” su Flickr, sotto licenza Creative Commons