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
Come si calcola la specificità CSS?
La specificità è calcolata come una tripla (a,b,c): "a" conta gli ID (#id), "b" conta classi (.class), attributi ([attr]) e pseudo-classi (:hover), "c" conta gli elementi (div, p) e pseudo-elementi (::before). Per confrontare, si legge da sinistra: 1,0,0 batte sempre 0,10,0.
Cosa batte cosa nella specificità CSS?
Lo stile inline (style="") ha specificità 1,0,0,0 e batte tutto. Poi vengono gli ID (0,1,0,0), poi classi/attributi/pseudo-classi (0,0,1,0), poi elementi/pseudo-elementi (0,0,0,1). Il selettore universale (*) ha specificità 0. !important sovrascrive tutto.
Perché la specificità è importante?
Quando più regole CSS si applicano allo stesso elemento, quella con specificità più alta vince. Capire la specificità evita sorprese di stile e riduce l'abuso di !important. Una buona architettura CSS mantiene la specificità bassa e prevedibile.
How is the specificity of a CSS selector worked out?
Specificity reads as a triple: the first number counts IDs, the second classes, attributes and pseudo-classes, the third elements and pseudo-elements. You compare from the left, so 1,0,0 beats 0,10,0.
Which rule wins when two selectors hit the same element?
The one with the higher specificity. The order is inline style, then IDs, then classes, attributes and pseudo-classes, then elements. The universal selector scores zero and !important overrides everything.
Why is it worth keeping CSS specificity low?
Low, predictable specificity makes it obvious which rule will apply and cuts down the reaching for !important to patch styles. Comparing two selectors before writing them avoids surprises later.
Does my data stay private?
Yes, and not because we promise it: this tool runs entirely inside your browser. What you type or upload never leaves your device, so it never reaches a server of ours and there is nothing we could keep, read or lose. You can check it yourself: open the page, disconnect from the internet, and the tool keeps working.
Do you store what I enter?
No. There is no database behind this tool: we do not store your files, your text or your results. When you close the tab nothing is left — not here with us, because it never arrived, and not anywhere else.
Do you profile me? Are you GDPR compliant?
We do not profile you: there is no account to create, we never ask for your email to use a tool, and we keep no profile of what you do. We are an Italian company and we work under the GDPR and the other European rules, with the privacy notice and the consent request in plain sight. One thing we say in full rather than hiding it behind a slogan: the ads on the page are Google's, and Google may use cookies to personalise them. You decide from the consent banner: if you say no the ads stay, but they are not personalised, and the tool works exactly the same.
If it is free, how do you make money?
From the ads on the page, and that is all. We do not sell your data, there is no hidden paid plan, there is no limit that eventually asks for your card, and you do not have to sign up. The ads pay for the servers and for the time we spend writing the tools: that is how we can keep them open to everyone.