How do I use the CSS Specificity Calculator?

Enter one or more CSS selectors, each on its own line. Click Calculate Specificity to see the breakdown. Review the (Inline, IDs, Classes, Elements) tuple for each selector. The highest-specificity selector is highlighted when comparing multiple selectors.

Is the CSS Specificity Calculator free?

Yes, the CSS Specificity Calculator is completely free. It runs entirely in your browser with no signup, no download, and no data sent to any server.

🎯

css

CSS Specificity Calculator

Calculate and compare CSS selector specificity. Understand which styles win in the cascade.

css specificity calculatorspecificity scorecss selector prioritycascade specificity

CSS Specificity Calculator

Enter CSS Selector(s) — one per line

How to use

How to Use the CSS Specificity Calculator

1 Enter one or more CSS selectors, each on its own line.
2 Click Calculate Specificity to see the breakdown.
3 Review the (Inline, IDs, Classes, Elements) tuple for each selector.
4 The highest-specificity selector is highlighted when comparing multiple selectors.

CSS specificity determines which styles are applied when multiple rules target the same element. Specificity is calculated as a four-part tuple: inline styles (highest), IDs (#id), classes/attributes/pseudo-classes (.class, [attr], :hover), and elements/pseudo-elements (div, ::before). Higher specificity always wins regardless of source order.

Common specificity values: a single element selector like "div" is (0,0,0,1), a class ".nav" is (0,0,1,0), an ID "#header" is (0,1,0,0), and an inline style is (1,0,0,0). One ID always beats any number of classes. Understanding specificity helps debug CSS conflicts and write maintainable stylesheets without relying on !important.

More Css tools