CSS Specificity Calculator
Drop one selector per line and see its specificity scored as the standard 4-tuple — inline / id / class / type — alongside a decimal weight and the rule that wins the cascade. Useful when two stylesheets fight and you can't tell which one the browser will pick.
Enter selectors to score them.
How the same selector scores
Tuples are compared left-to-right: a single ID beats any number of classes; a class beats any number of element selectors. The decimal form (0,1,1,1 → 111) is a shorthand, not a guarantee — a 1,0,0,0 (inline) still beats 0,99,99,99.
#nav .item a:hover
a=0 inline b=1 #nav c=2 .item, :hover d=1 a → 0,1,2,1 (decimal 121)
What you'll use this for
Specificity bugs are the silent killer of large stylesheets. Score before you fight the cascade.
Debug cascade
"Why isn't my style applying?" — score both selectors and the answer is right there.
Refactor stylesheets
Replace runaway ID chains with flat, low-specificity classes without breaking existing rules.
Audit design systems
Keep component CSS in a narrow specificity band so app code can override predictably.
Teach the cascade
Show juniors exactly how :is(), :where(), and :not() change the math.
How to score selectors
Paste your selectors
One per line, exactly as they'd appear before the opening brace. No braces, no declarations — just the selector list.
Read the tuple
Each row shows a,b,c,d plus the decimal form. a is for inline (always 0 from text input), b IDs, c classes/attrs/pseudos, d elements.
See which wins
With compare mode on, the highest-scoring row turns green. Ties highlight all top rows.
Iterate
Tweak a selector, add :where(), switch an ID for a class, and watch the score change live.
Frequently asked questions
Each selector is scored as a 4-tuple (a, b, c, d). a = inline style (1 or 0), b = number of ID selectors, c = number of class, attribute, and pseudo-class selectors, d = number of type and pseudo-element selectors. Tuples are compared component-wise from left to right — the higher value wins. The universal * selector and the descendant combinator do not contribute.
Almost. !important elevates a declaration above non-important ones regardless of specificity. The exception is another !important: between two important declarations, normal specificity rules resume. Author !important also loses to user !important and user-agent !important in origin tie-breaks. Inline style with !important is the heaviest hammer non-user code has.
:where() always contributes zero specificity, no matter what is inside it. That makes it perfect for resets and low-priority defaults. :is() and :not(), by contrast, take the specificity of the most-specific argument inside them. This calculator follows that rule.
Among non-!important declarations, yes — inline style (style="…") has specificity 1,0,0,0, which beats any combination of IDs/classes/elements written in a stylesheet. The only thing that can override it without !important is another inline style (with later declaration order winning).
Yes. Specificity is compared component-wise, not as a base-10 number. 0,1,0,0 beats 0,0,99,0 even though the "decimal" would suggest otherwise. The decimal column in the output is just a convenience for quick sorting at typical CSS scales.
About CSS specificity
Specificity is the algorithm browsers use to decide which CSS rule wins when several rules target the same element with conflicting declarations. It's defined in the Selectors Level 4 specification.
The four buckets
- a — inline:
style="…". Always 1 or 0. - b — IDs: every
#foo. - c — classes & co.:
.foo,[type=text],:hover,:nth-child(). - d — types:
div,a,::before,::after.
Special functional pseudos
:is(a, b, c)— takes the specificity of the most-specific argument.:not(a, b)— same: most-specific argument.:where(…)— always contributes zero.:has(…)— uses the most-specific argument; the parent itself contributes nothing.