Developer ToolsCSS ToolsFree Tool
CSS Specificity Calculator
Calculate the real CSS specificity of a selector — ID count, class/attribute/pseudo-class count, and element count — using genuine pattern parsing.
How to Use CSS Specificity Calculator
- 1Enter a CSS selector (e.g. .card > #header .title::before)
- 2Click Process
- 3Review the specificity breakdown and total value
Frequently Asked Questions
Using the standard CSS specificity model: ID selectors (#id) count as 100 points each, class/attribute/pseudo-class selectors (.class, [attr], :hover) count as 10 each, and element/pseudo-element selectors (div, ::before) count as 1 each — the total determines which conflicting rule wins.
Yes for element counting — it detects element names following combinators or whitespace. Combinators themselves don't add to specificity, only the selectors they connect.
Not specially — per the CSS spec, :not() itself doesn't count, but its argument does; this tool's regex-based approach may not perfectly replicate that nuance for complex :not() selectors. For most common selectors it's accurate.
No — the calculation happens entirely in your browser.
Related Tools
CSS Minifier
A developer-tools-side CSS minifier — strips comments, collapses whitespace, and trims spacing around punctuation, part of ToolHive's CSS/SCSS/LESS toolset alongside the beautifier and preprocessor converters.
CSS Beautifier
Reformat minified or messy CSS with a newline after each rule, selector, and declaration — the same logic as the CSS Prettifier tool.
CSS to SASS
Get a lightly restructured starting point for SCSS conversion — not a real CSS-to-SCSS transpiler with nesting or variable extraction.
SASS to CSS
Get a basic structural cleanup of SASS/SCSS — not a real Sass compiler. Variables and nesting are not resolved.