CSS Specificity Calculator
Paste CSS selectors and see each one's specificity score broken down by IDs, classes and elements.
What is Specificity Calculator?
A calculator for the number that decides which CSS rule wins. It scores each selector as (IDs, classes/attributes/pseudo-classes, types/pseudo-elements) and ranks a list so you can see the cause of a cascade fight.
How it works
Each top-level selector is parsed into its simple selectors. IDs add to column a, classes, attribute selectors and pseudo-classes to b, and type selectors and pseudo-elements to c. Functional pseudo-classes are scored per the spec: `:not()`, `:is()` and `:has()` take their most specific argument while `:where()` contributes nothing at all.
- Paste the source. Drop in code, a stylesheet, a query or a selector list. Everything is read locally — the page never uploads what you paste.
- Choose the options. Indent width, quote style, keyword case or target browsers. The result updates as you change them, so you can see the effect immediately.
- Copy or download. Copy the result to the clipboard or download it as a file. Reset clears the form and returns every option to its default.
Examples
Why the utility class keeps losing
`#sidebar .nav a` scores (1,1,1) and beats `.nav-link` at (0,1,0) no matter where it appears — the ranking makes that obvious in one glance.
Checking a :where() reset
`:where(*)` scores (0,0,0), which is exactly why zero-specificity resets work: every other rule can override them.
Common mistakes
Expecting a formatter to fix invalid code
Formatting is whitespace and quoting. A missing brace, an unclosed tag or an unquoted variable survives the round trip and is reported instead — check the findings list.
Minifying without running the tests afterwards
Even a safe, non-mangling minifier can expose an existing automatic-semicolon-insertion bug. The JavaScript Minifier keeps the newlines that matter, but re-run your tests before shipping.
Treating a rewritten query as verified
The SQL Dialect Converter translates the syntax it can prove; data types, casts and function differences are listed for review, not guessed. Run the converted query against a real database.
Renaming or reformatting generated files
Regenerating a formatter's output is a no-op only if the formatter is the same one that produced it. Keep generated code out of the round trip and format the source it came from.
Frequently asked questions
Do I add up the numbers to compare?
Compare column by column, the way the browser does: more IDs always wins, then more classes, then more elements. The tool shows a single weight too, which is useful for sorting but never replaces the column comparison.
How does inline style or !important fit in?
Inline `style="…"` beats any selector, and `!important` beats everything except a user-agent or user stylesheet. Neither is a specificity score, so they sit outside the (a, b, c) triple — the tool scores selectors only.
Does it need the stylesheet?
No, just the selectors. Paste whole rules or a plain list; braces and declarations are stripped before scoring, so you can copy straight out of a stylesheet.