Principio Specificità in CSS
Cos’è la Specificità?
Se ci sono due o più regole CSS che puntano allo stesso elemento, il selettore con il valore di specificità più alto “vince” e la sua dichiarazione di stile verrà applicata a quell’elemento HTML.
Pensa alla specificità come a un punteggio che determina quale dichiarazione di stile viene alla fine applicata a un elemento.
Guarda gli esempi seguenti:
<html> <head> <style> p { color: green; } </style> </head> <body> <p>Bellissimo pargrafo!</p> </body></html>
<html> <head> <style> .classe1 { color: red; } p { color: green; } </style> </head> <body> <p class="classe1">Bellissimo pargrafo!</p> </body></html>
<html> <head> <style> .classe1 { color: red; } p { color: green; } </style> </head> <body> <p class="classe1" style="color:purple;">Bellissimo pargrafo!</p> </body></html>
Gerarchia della Specificità
Ogni selettore CSS ha il suo posto nella gerarchia della specificità.
Ci sono quattro categorie che definiscono il livello di specificità di un selettore:
- Stili inline:
<h1 style="color: red;">
- ID: #navbar
- Classi, pseudo-classi, selettori di attributi: .classe, :hover, [src]
- Elementi e pseudo-elementi: h1, ::before ::after
Come Calcolare la Specificità?
Inizia da 0, aggiungi 100 per ogni valore ID, aggiungi 10 per ogni valore di classe (o pseudo-classe o selettore di attributi), aggiungi 1 per ogni selettore di elemento o pseudo-elemento.
Lo stile inline ottiene un valore di specificità di 1000 ed è sempre dato la massima priorità!
C’è un’eccezione a questa regola: la regola !important sovrascrive qualsiasi stile, anche quello inline.
La tabella qui sotto mostra alcuni esempi su come calcolare i valori di specificità:
Selettore | Valore Specificità | Punteggio |
---|---|---|
h1 | 1 | 1 |
.classe | 10 | 10 |
h1.classe | 11 | 1 + 11 |
#id | 100 | 100 |
h1#id | 101 | 1 + 100 |
<h1 style="color: red;"> | 1000 | 1000 |
h1.classe1.classe2 | 21 | 1 + 10 + 10 |
Il selettore con il valore di specificità è quello che avrà effetto sull’elemento sovrascrivendo le altre regole.