CSS Specificity Calculator
Calculate selector specificity scores in your browser.
Score selector specificity
When two CSS rules fight, specificity decides the winner — and misjudging it is why a style “won’t apply.” This calculator scores any selector’s specificity so you can see exactly how strong it is and why one rule overrides another.
Understanding the score (IDs, classes, elements) turns specificity wars from guesswork into something you can reason about. Paste a selector, read its score, and compare two selectors to know which will win before you touch the CSS.
Reading the score
Specificity counts IDs first, then classes and attributes, then elements, so a single ID outranks any number of classes. The score is computed in your browser.
Frequently Asked Questions
What does the css specificity calculator do?
It generates CSS from the options you choose and previews the result directly in your browser.
Can I use the CSS in production?
Yes. Copy the generated CSS as a starting point, then review naming, browser support, and design-system fit before shipping.
Does this upload my design values?
No. The generator runs locally in your browser and does not send your input to a server.
Is this free?
Yes. It is a free browser utility with no account required.
Practical utilities for front-end design and implementation work.