CSS Specificity Calculator
Calculate CSS selector specificity and weight instantly.
Compare Selectors
About this calculator
Type a CSS selector and see its specificity as three numbers: IDs, classes/attributes/pseudo-classes, and elements. Add more selectors to compare which one wins.
Every control updates a live preview and the CSS code at once. Copy the declaration into your stylesheet.
How to use it
- Type a selector.
- Read the (IDs, classes, elements) score.
- Press + Add to compare.
How specificity is counted
Specificity is written (a, b, c). a counts ID selectors (#nav), b counts classes, attributes and pseudo-classes (.btn, [type], :hover), and c counts elements and pseudo-elements (div, ::before). Compare left to right: (1,0,0) beats (0,10,0). Inline styles beat all selectors, and !important beats those. The universal selector adds nothing.
Worked example
Examples
| li | (0,0,1) |
| .menu li | (0,1,1) |
| #nav .item a:hover | (1,2,1) |
| ul#main li.active | (1,1,2) |
Tips and common mistakes
- Prefer classes; avoid IDs and !important in stylesheets.
- Equal specificity: the later rule wins.
- Keep selectors short.
- Use :where() to add zero specificity.
- Use cascade layers (@layer) to manage large codebases.
Frequently asked questions
What is CSS specificity?
The weight that decides which rule wins when several match.
Does an ID beat any number of classes?
Yes, columns are compared left to right.
What beats an ID?
Inline styles and !important.
Does * add specificity?
No.
How do I override a rule?
Match or exceed its specificity, or come later.
What does :where() do?
Keeps specificity at zero.