What is the CSS Specificity Calculator?
Calculate CSS selector specificity scores. Compare selectors to understand which rule wins and why. No more specificity guesswork.
Everything runs locally in your browser. Adjust the controls above, preview instantly, and copy clean, production-ready CSS — no account, no upload.
Using the CSS Specificity Calculator
Everything lives in the panel at the top of this page. There is nothing to install — it all runs right here in your browser.
Enter your selector
Paste any CSS selector into the input. The calculator splits it into ID (a), class/attr/pseudo-class (b), and element/pseudo-element (c) components.
Compare multiple selectors
Add a second selector to compare. The higher specificity (a,b,c) wins. IDs beat any number of classes.
Read the result
The score is shown as (a,b,c). Higher a beats any b or c value regardless of count.
What the generated code looks like
Clean, production-ready CSS — no vendor bloat, no unnecessary declarations.
/* Specificity: (a, b, c) where a=IDs, b=classes/attrs/pseudoclasses, c=elements */
/* (0,0,1) — one element */
h1 { }
/* (0,1,0) — one class */
.title { }
/* (0,1,1) — one class + one element */
h1.title { }
/* (1,0,0) — one ID */
#hero { }
/* (1,1,1) — one ID + one class + one element */
#hero .title h1 { }
/* (0,0,0) — :where() has zero specificity */
:where(.title) { }
/* !important overrides everything but creates technical debt */
.override { color: red !important; }Common mistakes & how to fix them
A few habits trip people up. Here is what to watch for — and the exact fix.
Using ID selectors for styling components
ID selectors (specificity 1,0,0) overpower all class selectors. Overriding them requires !important or another ID selector.
Fix: Reserve IDs for JavaScript hooks and anchor targets. Use classes for all styling. This keeps specificity manageable.
Overusing !important
!important overrides inline styles and all specificity. When multiple rules use !important, specificity applies among them, creating !important wars.
Fix: Use !important only for user-facing overrides (accessibility zoom stylesheets). In component CSS, use :is() or :where() to manage specificity deliberately.
Pro tips for better results
:is() and :not() use the specificity of their most specific argument
:is(#id, .class) has specificity (1,0,0) because the most specific argument is #id. :where() has zero specificity regardless of its contents, making it ideal for reset styles.
Frequently asked questions
From the blog
Read more →Modern CSS techniques every developer should know
A practical tour of the CSS features that replaced yesterday’s hacks.
From design to code without the friction
How visual generators speed up the build without sacrificing clean output.
Writing CSS that scales with your project
Tokens, naming, and structure that keep large stylesheets maintainable.