CSS Specificity Calculator
Score any selector and compare selectors.
(1, 1, 1)
(0, 0, 5)
Result
Selector A wins.
Specificity is counted as three numbers: IDs, then classes/attributes/pseudo-classes, then element/pseudo-element selectors. :not(), :is(), and :has() contribute the maximum specificity of their arguments. :where() always contributes 0.
About
Paste a CSS selector. See the specificity as ID,Class,Element triples. Compare two selectors to see which wins. Useful for debugging why your style isn't applying.
How to use
- Paste a selector.
- See the specificity score.
- Add another to compare.
FAQ
Why is my style not applying?+
Usually because another selector has higher specificity. Inline styles beat IDs beat classes beat elements. !important breaks all the rules but should be a last resort.
How does :is() and :where() affect specificity?+
:is() takes the highest specificity inside the parentheses. :where() always has 0 specificity. Useful for grouping selectors without a specificity penalty.