What I built
I added a CSS Specificity Calculator to devnestio — a free dev tools collection.
👉 https://devnestio.pages.dev/css-specificity-calculator/
Enter CSS selectors and instantly see the (a,b,c) specificity tuple, numeric score, and a token-by-token breakdown. Compare multiple selectors to find which rule wins.
Why I built it
When styles aren't applying as expected, specificity is often the culprit. Calculating it mentally is error-prone — especially with :not(), :is(), and attribute selectors in the mix.
Features
- Specificity calculation — (a = IDs, b = classes/attrs/pseudo-classes, c = elements/pseudo-elements)
- Token breakdown — see each token with its type and contribution
- Multi-selector comparison — table with scores, relative bar widths, and Wins badge
-
:not()/:is()/:where()support — inner selectors recursively parsed - Specificity reference card — common selectors and their scores
Quick reference
| Selector | Specificity |
|---|---|
#id |
(1,0,0) |
.class |
(0,1,0) |
div |
(0,0,1) |
* |
(0,0,0) |
Tech
Single HTML file, zero dependencies, custom regex-based CSS selector parser, hosted on Cloudflare Pages.
Part of devnestio — a growing collection of free, in-browser developer tools.
Top comments (0)