CSS Specificity Calculator
See exactly which CSS rule wins a conflict — ID, class, and type selector counts.
Every calculation runs locally in your browser. Covers the common case — :not(), :is(), and :where() aren't resolved to their spec-accurate argument-dependent specificity, just counted as one pseudo-class.
Specificity (IDs, classes, types)
1, 1, 3
IDs
1
Classes / attrs / :pseudo
1
Types / ::pseudo
3
For informational and educational purposes only — not professional or technical advice, and not a substitute for consulting a qualified professional about your specific situation. TrueMeasureKit is not liable for decisions made based on these results. See our Terms of Service.
How the browser breaks a specificity tie
When two rules target the same element, the browser compares specificity tier by tier, left to right: any ID beats any number of classes, any class beats any number of type selectors — it's a strict hierarchy, not a weighted sum, so ten class selectors never outrank a single ID. Only when every tier ties exactly does the browser fall back to source order, applying whichever rule appears later in the stylesheet. This is also why !important exists as an escape hatch — it overrides specificity entirely rather than competing within it.
Frequently asked questions
How is CSS specificity actually calculated?
As a three-part score: ID selectors count the most, then classes/attributes/pseudo-classes, then element/pseudo-element selectors — a rule with any ID always beats a rule with only classes, no matter how many classes it has.
Does !important override specificity entirely?
Yes — !important short-circuits the normal specificity cascade and (with rare exceptions) wins regardless of selector specificity, which is exactly why overusing it makes CSS hard to override and debug later.