How CSS Decides Which Rule Applies
When two rules set the same property on the same element, the browser compares specificity as three numbers. The first counts ID selectors, the second counts classes, attribute selectors and pseudo-classes, and the third counts element names and pseudo-elements. The groups are compared in order, so a single ID beats any number of classes. The universal selector and combinators contribute nothing, :where() always contributes zero, and :is(), :not() and :has() take the specificity of their most specific argument. This calculator applies those rules and shows which token produced each point.
How to Use the Calculator
- 1Type or paste one selector. Enter them one at a time, because a comma-separated list has no single specificity.
- 2Read the three columns to see how many IDs, class-level selectors and element-level selectors it contains.
- 3Check the token breakdown underneath to see exactly which part of the selector contributed each point.
- 4Enter a competing selector to find out which of the two wins, and by which group.
- 5If the two tie, remember the later rule in the stylesheet wins, so reordering may be the fix rather than adding weight.
When Specificity Matters
Debug a style that will not apply
Compare your selector against the one winning in developer tools to see exactly which group is losing.
Avoid escalating selector weight
Check whether a lighter selector would already win before stacking extra classes or reaching for an ID.
Review a design system override
Confirm that a component's override beats the library default without depending on stylesheet order.
Learn the modern pseudo-class rules
See how :where(), :is() and :has() change the score, which is the most common surprise in current CSS.
Frequently asked questions
Where do inline styles and !important fit in?
They sit outside the three-number score. An inline style attribute beats any selector, and !important beats normal declarations regardless of specificity. Because they short-circuit the cascade, both make styles harder to override later and are best avoided in shared code.
Why is :where() scored as zero?
That is its purpose. :where() lets a library match complex structures while contributing no specificity, so application code can override the result with a single simple selector. :is() looks similar but takes the weight of its most specific argument.
Does the number of elements in a descendant chain matter?
Only through the third group. div span a counts three element selectors, which still loses to one class. Combinators such as >, + and ~ add nothing at all, and neither does the universal selector *.
Why can I not enter a selector list?
A comma-separated list is several independent selectors, and each one is matched and scored separately. There is no single specificity for the list, so the tool asks for one selector at a time to avoid reporting a misleading number.