Category: Developer tools
CSS Specificity Calculator
Compare selector specificity as an A-B-C score
Enter one or more CSS selectors to compute their specificity as an ID-class-element (A-B-C) score, sorted so you can see which rule would win. Runs entirely in your browser.
| Selector | Specificity (A-B-C) | IDs | Classes, attributes, pseudo-classes | Elements, pseudo-elements |
|---|---|---|---|---|
#nav .item > a:hover | 1-2-1 | 1 | 2 | 1 |
.card.featured | 0-2-0 | 0 | 2 | 0 |
button | 0-0-1 | 0 | 0 | 1 |
* | 0-0-0 | 0 | 0 | 0 |
Everything on this page is processed in your browser. Nothing is uploaded.
What this tool does
When two CSS rules target the same element, the one with higher specificity wins, not the one written last. Specificity is counted as three numbers: A for ID selectors, B for classes, attribute selectors and pseudo-classes, and C for element selectors and pseudo-elements. This tool parses each selector you enter, including :not(), :is(), :has() and the zero-specificity :where(), and reports its A-B-C score so you can compare selectors directly instead of guessing.
How to use it
- Enter one selector per line, such as #nav .item > a:hover.
- Read each selector's A-B-C specificity score.
- Sort by specificity to see which selector would win a conflict.
Privacy
This tool runs entirely in your browser. Your input is never uploaded, stored or shared — closing the tab removes it.
Frequently asked questions
- Is my CSS uploaded anywhere?
- No. Parsing happens in JavaScript running in the page, so selectors from a private stylesheet never leave your device.
- How is :not(), :is() or :has() scored?
- These contribute the specificity of their most specific argument, per the CSS specification, while :where() always contributes zero regardless of what is inside it.
- Does inline style or !important affect this score?
- No. This tool scores selectors only. An inline style attribute and !important both override normal specificity entirely rather than adding to the A-B-C count.