DevLab
#
CSSintermediate

CSS Specificity Calculator

calculate and compare CSS selector specificity scores

By Bikram NathLast updated

Specificity determines which CSS rule wins when two selectors target the same element, scored as an (a, b, c) triple where a is ID count, b is class and pseudo-class count, and c is element count. Paste `#header a` and `.nav .link` into the calculator and you get (1, 0, 1) versus (0, 2, 0) instantly. Unlike DevTools, it lets you compare hypothetical selectors before touching your stylesheet.

Try it now — free, instant, no signup

What is CSS Specificity Calculator?

CSS Specificity Calculator takes a selector string and returns its (a, b, c) triple. In that tuple, a counts ID selectors, b counts classes and pseudo-classes, and c counts element and pseudo-element selectors. Type `nav ul li.active > a` and you get (0, 1, 4). Enter `#sidebar .widget a` and you see (1, 1, 1), which wins because a=1 outranks any b or c value regardless of how many classes accumulate in the losing selector.

Browser DevTools shows which declaration is winning in the computed panel but does not expose raw specificity numbers or let you test selectors you have not written yet. Keegan Street's specificity.keegan.st is the closest dedicated alternative and adds a visual fish-scale chart. Firefox DevTools also annotates specificity inline when you hover over a rule in the inspector. This calculator is faster when you only need the numeric triple without navigating DevTools panels or loading another tab.

A common trap is treating specificity as arithmetic. Eleven class selectors score (0, 11, 0), which still loses to a single ID selector at (1, 0, 0) because columns compare left to right and never carry over. CSS Selectors Level 4 also changed pseudo-class behavior in ways that trip up developers: `:where()` contributes zero specificity regardless of what is inside it, while `:is()` takes the specificity of its most specific argument, so `:is(div, #id)` scores (1, 0, 0) even on a plain element.

When to use CSS Specificity Calculator

✓Debug a crossed-out rule in DevTools by checking which competing selector holds the higher (a, b, c) score.
→Audit a legacy stylesheet to find selectors bloated with ID qualifiers before a component refactor.
⚡Compare the specificity cost of adding one class versus nesting one level deeper before writing any new CSS.

Frequently Asked Questions

Does !important override specificity, and will it appear in the (a, b, c) score?
!important is not part of specificity and will not appear in the output triple. It operates in a separate layer of the CSS cascade that sits above specificity entirely. When two competing declarations both carry !important, the browser falls back to specificity as a tiebreaker between them. This tool calculates selector specificity only; whether a given declaration carries !important is a separate concern that requires reading the stylesheet directly, not a score the calculator can surface.
Why does :not(.active) increase the specificity score if :not() looks like a neutral wrapper?
The :not() pseudo-class itself has zero specificity, but its argument counts normally. So a:not(.active) scores (0, 1, 1): one class from .active inside :not(), plus one element selector from a. CSS Selectors Level 4 extended :not() to accept complex selectors rather than just simple ones, meaning :not(.menu .item) now contributes (0, 2, 0) from both class selectors inside the parentheses. Many developers expect :not() to be neutral end-to-end, but only the wrapper token itself is zero.
Do combinators and the universal selector affect the specificity score?
No. Combinators such as >, +, ~, and the descendant space contribute zero specificity, as does the universal selector *. They are structural tokens that control which elements are matched but have no effect on the score. So `* > div` and `div` both calculate to (0, 0, 1). A deeply nested chain like `body > main > section > p` can share the same specificity as a bare `p` selector if no class or ID appears anywhere in the chain.
What is the specificity difference between :is() and :where(), and does the calculator treat them correctly?
:where() always contributes zero specificity regardless of what is inside it, which makes it useful for low-priority base styles you want any rule to override. :is() takes the specificity of its most specific argument, so :is(div, #sidebar, .header) scores (1, 0, 0) because #sidebar dominates the list. If the calculator result does not match what your browser actually applies, the DevTools computed panel is the authoritative source, since Level 4 selector conformance varies across browser versions.
Should I paste the full CSS rule block with properties, or just the selector?
Paste only the selector portion that appears before the opening brace. Enter `header nav > ul li.active` rather than the full declaration block including color or margin values. The parser reads a { character as the beginning of an attribute selector, so including property-value pairs and braces produces an incorrect or zero score. If you are copying from a live stylesheet, stop before the { and omit everything inside it. The calculator only needs the targeting part of the rule.

Related Tools

CSS
CSS Variables Cheatsheet
complete CSS custom properties reference with examples
CSS
CSS Flexbox Generator
generate CSS flexbox layouts with a visual editor
CSS
CSS Grid Generator
generate CSS grid templates visually with live preview
HTML
HTML Beautifier
format and indent HTML code with configurable settings