CSS Specificity Calculator
When two CSS rules clash, the more specific selector wins. Type any selectors here to see each (a, b, c) score instantly, with the winner highlighted so you can fix stubborn styles with confidence.
| Selector | a (IDs) | b (class/attr) | c (elements) | Score |
|---|
Understand specificity
- a = ID selectors (
#header) — the strongest. - b = class (
.nav), attributes ([type=text]), pseudo-classes (:hover). - c = elements (
div) and pseudo-elements (::before). :where()always has 0 specificity;:not(),:is()and:has()take the specificity of the strongest argument inside them.
How to use
- Type one or more CSS selectors (one per line).
- Press "Calculate" — each selector's (a, b, c) score will appear in the table.
- The selector with the highest score will be highlighted — that is the one that wins when two rules clash.