CSS Specificity Calculator
NewCalculate and compare CSS selector specificity to debug cascade and override issues.
Each selector is scored as (inline, ids, classes, elements) per the CSS Selectors spec. Inline styles always outrank IDs; higher tuples win when comparing selectors left to right.
- IDs —
#id - Classes / attributes / pseudo-classes —
.class,[attr],:hover - Elements / pseudo-elements —
div,::before - Universal selector
*, combinators (> + ~space), and:where()add zero.
Frequently Asked Questions
What do the four numbers next to each selector mean?
They are the (inline, IDs, classes, elements) specificity tuple from the CSS Selectors spec. Inline styles always outrank IDs, IDs outrank classes/attributes/pseudo-classes, and those outrank plain element and pseudo-element selectors.
How are :not(), :is(), and :has() scored?
Their argument list is unwrapped and scored as if it appeared directly in the selector. This is an approximation — per spec only the most specific argument in a comma list should count, so selectors with multiple comma-separated arguments inside those pseudo-classes may be scored slightly high.
Why does :where() always add zero?
That matches the CSS spec exactly: :where() is defined to always contribute zero specificity regardless of what selectors are inside it, unlike :is()/:not()/:has().
Can I paste multiple selectors at once to compare them?
Yes. Enter one selector per line and the results panel automatically ranks them from highest to lowest specificity, which is useful for figuring out why one CSS rule is being overridden by another.
Does it account for the order rules appear in the stylesheet?
No. Specificity and source order are separate parts of the cascade. When two selectors have identical specificity, the one that appears later in the stylesheet wins — this tool only compares specificity, not source order.