CSS Specificity Calculator
CSS selectors
Summary
Specificity results
About CSS Specificity Calculator
CSS specificity decides which selector wins when multiple rules target the same element. This calculator shows the A-B-C score for each selector.
It counts IDs, classes, attributes, pseudo-classes, elements, and pseudo-elements, including common selector functions such as :is(), :not(), :has(), and :where().
How to use this tool
- Paste one selector per line, a comma-separated selector list, or full CSS rules.
- Click Analyze to calculate specificity for each selector.
- Compare the A-B-C scores and review which selector is strongest.
Tips
- Avoid unnecessary IDs when you want CSS that is easy to override.
- :where() always has zero specificity, which is useful for low-priority defaults.
- When selectors have equal specificity, the later matching CSS rule usually wins.
CSS specificity checks before changing an override
A selector score explains one part of the cascade. Layer order, origin, importance, scope, and source order can still decide the winning declaration.
Compare the full cascade
Check origin, cascade layers, !important, specificity, scoping proximity, and source order before increasing selector weight.
Keep selectors maintainable
Prefer classes and deliberate component boundaries over IDs, deep nesting, repeated selectors, or escalating !important rules.
Inspect functional selectors
Remember that :is(), :not(), and :has() use argument specificity, while :where() always contributes zero specificity.
Test the rendered state
Verify hover, focus, disabled, responsive, theme, and dynamically inserted states in browser developer tools.
Related tools
You may also find these tools useful.