CSS Specificity Calculator
Calculate the specificity of a CSS selector to understand which rule wins.
About this tool
Calculate the specificity of a CSS selector — the score browsers use to decide which of two conflicting rules actually applies to an element.
Key Features
- Breaks specificity into IDs, classes/attributes/pseudo-classes, and elements
- Handles combinators, attribute selectors, and pseudo-elements
- Correctly treats :where() as contributing zero specificity
- Instant calculation
How to Use
- Enter a CSS selector.
- Click Calculate.
- Compare the score against another selector to see which would win.
Benefits
- Debug why a style is not being applied
- Understand why one rule overrides another
- Write more predictable, maintainable CSS
Frequently Asked Questions
Specificity is compared as three separate counts, in order of importance: ID selectors first, then classes/attributes/pseudo-classes, then element and pseudo-element selectors. A single ID selector always outweighs any number of classes, and a single class always outweighs any number of plain element selectors — the counts are never added together into one combined number.
Partially, by design simplification. The specification says :not() and :is() take on the specificity of their most specific argument, while :where() always contributes zero — this tool correctly treats :where() as zero-cost, but treats :not()/:is() as a single ordinary pseudo-class rather than recursively evaluating their argument, which covers the overwhelming majority of everyday selectors but can undercount specificity for a complex argument inside :not() or :is().
An inline style attribute on the element outranks any selector-based rule, and an !important declaration outranks everything else including inline styles (with !important declarations then compared against each other by their own specificity). Both are considered blunt tools best used sparingly, since they can make later overrides much harder to reason about.