Developer Tools
CSS Specificity Calculator
Type any CSS selector and see its specificity broken down by the (A, B, C, D) tuple: A = ID count, B = class + attribute + pseudo-class count, C = element + pseudo-element count, D = inline-style override. The parser understands :not(), :is(), :where(), :nth-child() and the legacy single-colon pseudo-elements. Compare two selectors side by side to see which one wins and why.
Your input is processed locally in your browser. It is not uploaded to Dueneo.
Loading CSS Specificity Calculator…
How to use
- 1
Type a selector
Enter any CSS selector in the single-selector box to see its specificity instantly.
- 2
Compare two
Put one selector in each panel of the side-by-side comparison. The winner is highlighted.
- 3
Toggle inline
Tick 'Treat as inline style' to model a style="" attribute, which beats any selector.
- 4
Read the breakdown
Each panel lists every token and which bucket it counts towards.
Common use cases
- Figure out why your CSS rule is being overridden by another.
- Teach or learn the CSS specificity algorithm.
- Audit a stylesheet for over-specific selectors (lots of IDs) before refactoring.
- Decide whether to add a class, an attribute or an ID to win a tie.
Limitations
!importantis not modelled — it overrides specificity and would need its own comparison layer.- Nested
:not(:not(...))and deeply recursive:is()are handled but very exotic syntax may fall back to a best-effort count. - Source order is not tracked — when specificity ties, the tool says so but does not know which rule appears later in your stylesheet.
- The parser is hand-rolled for selectors only; at-rules and declaration blocks are ignored.