CSS Specificity Calculator - Score Selectors & Compare Which Rule Wins

This CSS Specificity Calculator parses any selector into the W3C (a, b, c) tuple-counting IDs, classes/attributes/pseudo-classes, and elements/pseudo-elements. Enter two selectors to compare scores, view a component breakdown, and see which rule wins when both match the same element.

Compare selectors

Selector AWinsSelector B

Result

Selector A wins with (1, 2, 1) over Selector B at (0, 1, 3).

Selector A breakdown

(1, 2, 1)

IDs: #nav
Classes: .menu
Pseudo-classes: :hover
Elements: li

Selector B breakdown

(0, 1, 3)

Classes: .active
Elements: nav, ul, li

Specificity reference

a - ID selectors (#id)
b - classes, attributes, pseudo-classes
c - type and pseudo-element selectors

Quick examples

#app .btn.primary
(1, 2, 0)
button:not([disabled])
(0, 1, 1)
:where(.reset) a
(0, 0, 1)
article p::first-line
(0, 0, 3)

Limitations: inline styles, !important, :nth-child() arity, namespaces, and shadow DOM piercing are not scored. :is() and :not() use the most specific inner argument; :where() always contributes (0, 0, 0).

Specificity scoring reference

Selector type	Column	Example	Score
ID	a	#header	(1, 0, 0)
Class / attribute / pseudo-class	b	.btn[type="submit"]:hover	(0, 3, 0)
Element / pseudo-element	c	article p::first-line	(0, 0, 3)
:where() wrapper	-	:where(#app .card)	(0, 0, 0)

Why specificity matters in the cascade

When multiple CSS rules target the same element, the browser resolves conflicts using the cascade: origin, importance, specificity, and source order. Specificity quantifies how precisely a selector pinpoints an element-an ID beats a class, and a class beats a bare element. Without scoring selectors, refactors produce mysterious overrides where a utility class loses to a long-forgotten compound selector buried in legacy CSS.

This calculator implements the Selectors Level 4 specificity model used by modern browsers. Paste any author selector-simple or compound-and receive the canonical (a, b, c) tuple plus a human-readable breakdown of every contributing component.

Known limitations

This tool scores selector strings only-it does not evaluate !important, inline style attributes, or shadow-piercing combinators. Namespace prefixes and complex :nth-child() arity are treated pragmatically for common author stylesheets. For production audits, pair these scores with the Color Contrast Checker and CSS Clamp Calculator when building accessible, fluid design systems.

CSS Specificity FAQ

How is CSS specificity calculated?

Specificity is a three-part score (a, b, c). IDs in the a column each add one point. Classes, attribute selectors, and pseudo-classes count toward b. Type selectors and pseudo-elements count toward c. Combinators and the universal selector * add nothing. When comparing rules, the browser checks a first, then b, then c-the higher tuple wins.

What does (1, 2, 1) mean in specificity?

The tuple lists counts in order: one ID selector, two class/attribute/pseudo-class selectors, and one type or pseudo-element selector. For example, #nav .item.active li scores (1, 2, 1). Compare tuples left to right-(1, 0, 0) beats (0, 5, 5) because the ID column decides first regardless of lower columns.

How do :not(), :is(), and :where() affect specificity?

The :not() and :is() pseudo-classes take the specificity of their most specific inner argument-the functional pseudo itself adds nothing. :where() always contributes (0, 0, 0), making it ideal for low-specificity resets that should lose to component styles. This calculator evaluates nested arguments inside parentheses for all three.

CSS specificity calculator vs DevTools: which is faster?

Browser DevTools show computed styles for matched elements but do not always surface the raw (a,b,c) tuple when you are authoring CSS. This standalone calculator scores selectors before you deploy-paste two competing rules, get an instant winner badge, and avoid trial-and-error in the cascade panel when refactoring legacy stylesheets.

What happens when two selectors have equal specificity?

When the (a, b, c) tuple ties, source order decides: the rule that appears later in the stylesheet wins. !important declarations override normal specificity (this tool does not score !important). Inline styles beat author stylesheets but are outside selector specificity entirely.

Does ::before count differently from :hover?

Yes. Pseudo-elements like ::before, ::after, and ::first-line count in the c column alongside element names. Pseudo-classes like :hover, :focus, and :first-child count in the b column. That is why a:hover::before scores (0, 1, 2)-one pseudo-class plus an element and pseudo-element.