Question 1

What is CSS specificity?

Accepted Answer

CSS specificity is the algorithm browsers use to decide which CSS rule wins when multiple rules target the same element. It is expressed as three numbers: (a) the count of ID selectors, (b) the count of class / attribute / pseudo-class selectors, and (c) the count of element / pseudo-element selectors. Higher specificity wins; if two rules tie, the rule that appears LATER in the stylesheet wins (source-order rule). Inline style attributes have implicit specificity ABOVE all selectors. Understanding specificity is essential for debugging "why is my CSS rule not applying" bugs.

Question 2

Why does :where() contribute zero?

Accepted Answer

:where() was added in CSS Selectors Level 4 explicitly to let authors group selectors WITHOUT adding to their specificity. Compare :is(.btn, .button) which has the specificity of .btn (1 class) versus :where(.btn, .button) which adds nothing. This is useful for resetting library styles: wrap .lib { ... } in :where(.lib) { ... } and your application code can override it with even a single class. Same selector matching behavior, different cascade priority.

Question 3

How is :is() different from :where()?

Accepted Answer

:is() inherits the MAX specificity of its arguments — so :is(.btn, #submit) gets specificity of #submit (1 ID). :where() always contributes (0, 0, 0). Use :is() when you want concise grouping AND normal specificity behavior. Use :where() when you want concise grouping but minimal cascade impact (library styles, opinion-light defaults). Both match the same elements; only specificity differs.

Question 4

Does the order of selectors matter for specificity?

Accepted Answer

No — order WITHIN a single selector doesn't affect specificity. .a .b and .b .a have identical specificity (0, 2, 0). What matters is the COUNT of each type. However, source order across DIFFERENT rules DOES matter when two rules have equal specificity — the later rule wins. Combinators (>, +, ~, descendant space) also do not affect specificity; they only change which elements are matched.

Question 5

Why is inline style stronger than any class?

Accepted Answer

Inline style (style="color: red") has implicit specificity of (1, 0, 0, 0) — a fourth dimension above the three-tuple for selectors. To beat inline style, you either need !important on a regular rule, or another inline style with !important. This is the technical reason CSS-in-JS libraries often emit inline styles for component leaf nodes: it guarantees the component's styles cannot be overridden by app stylesheets without explicit !important.

Question 6

What about !important?

Accepted Answer

!important moves a declaration into a higher cascade layer that beats normal specificity. Within the !important layer, the same (a, b, c) specificity rules apply. !important on a low-specificity selector beats a no-important rule with high specificity. Two !important rules compete by specificity. Best practice: avoid !important except for utility classes (e.g. .hidden { display: none !important }) where you genuinely need to ensure the rule wins regardless of context. Specificity wars escalate quickly with !important.

Question 7

How does the calculator handle :nth-child(An+B of <selector>)?

Accepted Answer

CSS Selectors Level 4 added the "of" syntax to :nth-child and :nth-last-child. Per spec, the specificity is: the pseudo-class itself adds 1 to "b" (like any pseudo-class) PLUS the MAX specificity of the inner selector list. So :nth-child(2n+1 of .row) gets (0, 2, 0) — one for :nth-child, one for .row. Our calculator implements this rule correctly. Bare :nth-child(2n+1) without "of" gets just (0, 1, 0).

Question 8

Can I use this to verify what Chrome / Firefox / Safari compute?

Accepted Answer

Yes — the algorithm we use matches the W3C-published spec, which all major browsers conform to. Browser devtools also expose specificity (Chrome's Styles pane shows it as "(0,2,1)" or similar next to each rule). Cross-check our result with browser devtools if you want to be sure; they should always agree. If they disagree, the selector likely has a non-standard form (vendor-prefixed pseudo-class, custom-element with namespace, etc.).

Question 9

How can I LOWER the specificity of a selector?

Accepted Answer

Two main techniques. (1) Wrap parts in :where() — :where(.lib) .button gets the specificity of just .button. (2) Use less-specific selectors — replace ID selectors with classes (#main becomes .main), remove element-name prefixes (div.card becomes .card), and use less-nested rules. Modern best practice in component-driven CSS is to write low-specificity selectors so that local overrides at the component level always win without needing !important.

Selector Part	Weight Added	Notes
Inline style (style attribute)	(1, 0, 0, 0) — beats every selector	Per spec, inline style is a separate dimension above selectors. CSS-in-JS often emits it.
ID selector (#id)	adds 1 to "a"	IDs are heavy — avoid using them in stylesheets when classes will do.
Class (.cls)	adds 1 to "b"	Workhorse selector. Stack two classes (.btn.btn) to outweigh a single class without raising ID count.
Attribute ([type="text"])	adds 1 to "b"	Same weight as a class — useful for form-state styling without classes.
Pseudo-class (:hover, :focus)	adds 1 to "b"	Includes :is(), :has() which inherit max specificity of arguments.
Element (div, span)	adds 1 to "c"	Lightest — most selectors involve at least one element name.
Pseudo-element (::before)	adds 1 to "c"	Same weight as element. Double-colon syntax is modern; single-colon is legacy alias.
* universal selector	adds 0 to all	Pure noise for specificity — only useful for cascading effects.
Combinators (>, +, ~, space)	0	Direction/relationship, not weight. Do not affect specificity.
:where(X) — special	0	Argument specificity is DISCARDED. Use :where to opt out of specificity wars.
:is(X) / :not(X) / :has(X)	takes MAX of argument specificity	Lets you express alternatives without inflating beyond the heaviest alternative.

Free CSS Specificity Calculator: Find Out Why Your CSS Rule Is Not Applying

Selectors Level 4 Spec

Compare Mode

Token Breakdown

100% Client-Side

Why Your CSS Rule Is Not Applying — And How To Fix It

CSS Specificity Rules — What Counts & What Does Not

Five Common Specificity Problems & Fixes

Four Specificity Best Practices for 2026

Related CSS Utilities