📖 What is CSS Specificity Calculator?
CSS Specificity Calculator computes the specificity score of any CSS selector, helping you understand which styles win when multiple rules target the same element. Paste a selector and see its specificity broken down into (inline, ID, class, element) components. Use it to debug why styles are not applying, or to learn CSS specificity rules. Everything runs in your browser.
💡 Example
Input
#header .nav a:hover
Output
Specificity: 0, 1, 2, 1
(0 inline, 1 ID, 2 classes/pseudo-classes, 1 element)
🛠️ Common Use Cases
- Debugging why CSS styles are not applying as expected
- Comparing specificity between two competing selectors
- Learning CSS specificity rules and priorities
- Refactoring CSS to reduce specificity wars
- Understanding !important vs specificity
📝 Specificity Rules
- Inline styles (style="...") — highest specificity (1,0,0,0)
- IDs (#header) — (0,1,0,0)
- Classes, attributes, pseudo-classes (.nav, [type], :hover) — (0,0,1,0)
- Elements, pseudo-elements (div, ::before) — (0,0,0,1)
- !important — overrides everything (not specificity, but a separate priority)
⚠️ Common Mistakes
- Overusing !important — it breaks the cascade and makes CSS unmaintainable. Fix specificity instead.
- Over-qualifying selectors —
div.container #header .nav a is unnecessarily specific. Keep selectors short. - ID vs class — one ID outweighs any number of classes. Avoid IDs in CSS for more manageable specificity.
❓ Frequently Asked Questions
Does !important count as specificity? ▾
No — !important is a separate override that beats all specificity. Two !important rules compete by specificity. Avoid !important when possible.
Why does my CSS class not work? ▾
A more specific selector is likely overriding it. An ID selector (#header) beats any number of class selectors (.nav .link .active). Use this tool to compare.
How do I reduce specificity issues? ▾
Use class selectors instead of IDs, keep selectors short (1-3 levels), use BEM or utility-class methodology, and avoid !important.
Is my data private? ▾
Yes — all processing runs entirely in your browser. Your data is never sent to any server.
Is this tool free? ▾
Completely free — no login, no usage limits, works offline once loaded.
Yes — completely free, no login required, no usage limits.
Is my data private? ▾
Yes — all processing runs in your browser. Your data is never sent to any server.
Does it work offline? ▾
Yes — once the page is loaded, the tool works without an internet connection.