CSS Specificity Calculator
Enter a CSS selector to see its specificity as an a-b-c triple with a breakdown of every part that counted. Compare selectors to find which one wins. Everything runs in your browser.
style attribute beats any selector, and !important overrides the specificity rules entirely.About the CSS Specificity Calculator
The CSS Specificity Calculator parses a CSS selector and computes its specificity as the standard three-part score: IDs, then classes, attributes, and pseudo-classes, then elements and pseudo-elements. It shows the a-b-c value and a breakdown of every part that counted, so you can see why one rule wins over another. Add a second selector to compare them side by side. Everything runs in your browser; nothing is uploaded.
How it works
- Type a CSS selector into the input and press Enter or click Calculate. You can also click a sample chip to load a common selector.
- Read the a-b-c score: a counts IDs, b counts classes, attributes, and pseudo-classes, and c counts elements and pseudo-elements.
- Check the breakdown chips under the score to see exactly which part of the selector landed in each bucket.
- Add more selectors to compare. The higher score is marked as the winner, and the bar chart shows the relative weight of each.
Features
- Three-part specificity score (a-b-c) with a per-part breakdown.
- Compare two or more selectors and see which one wins, including ties.
- Handles IDs, classes, attributes, pseudo-classes, pseudo-elements, the universal selector, and combinators.
- Treats :is(), :not(), :has(), and :where() as zero-specificity wrappers, and flags inline style and !important.
- Runs fully client-side with no libraries and no data sent to a server.
Frequently asked questions
How is specificity calculated?
Specificity is a three-part value written a-b-c. The a part counts ID selectors. The b part counts classes, attribute selectors, and pseudo-classes. The c part counts element (type) selectors and pseudo-elements. The parts are compared left to right: a higher a wins regardless of b and c, and so on.
Where does the universal selector (*) count?
The universal selector has no effect on specificity. It is shown in the breakdown so you can see it was parsed, but it adds nothing to the a, b, or c value.
How are :is(), :not(), :has(), and :where() handled?
These functional pseudo-classes do not add to the score themselves. In real CSS, :is(), :not(), and :has() take the specificity of their most specific argument, while :where() always contributes zero. This tool marks them as zero-specificity wrappers so you can see they were recognized.
What about inline styles and !important?
An inline style attribute outranks any selector in a stylesheet, and !important overrides the normal specificity rules entirely. Neither is a real selector, so when you enter them the tool shows a note instead of a normal a-b-c score.
Is my input sent anywhere?
No. The selector is parsed entirely in your browser with plain JavaScript. Nothing is uploaded, stored, or logged.