CSS Specificity Calculator
1
ID
2
Classes/Attr
1
Elements
121
Total
0
ID
2
Classes/Attr
1
Elements
21
Total
Vince il selettore
A
Specificità 1,2,1 vs 0,2,1
Domande Frequenti
Tutto quello che devi sapere sulla specificità CSS
Domande frequenti
Come si calcola la specificità di un selettore CSS?
La specificità di un selettore CSS si esprime come tripla: il primo numero conta gli ID, il secondo classi, attributi e pseudo-classi, il terzo elementi e pseudo-elementi. Il confronto si legge da sinistra, quindi 1,0,0 batte 0,10,0.
Quale regola vince quando due selettori colpiscono lo stesso elemento?
Vince la regola con la specificità più alta. L'ordine è: stile inline, poi ID, poi classi, attributi e pseudo-classi, infine elementi e pseudo-elementi. Il selettore universale ha specificità zero e !important sovrascrive tutto.
Perché conviene tenere bassa la specificità CSS?
Una specificità bassa e prevedibile rende chiaro quale regola verrà applicata e riduce il ricorso a !important per correggere gli stili. Confrontare due selettori prima di scriverli evita sorprese quando le regole si sovrappongono.