How CSS Specificity Works (And Why Your Style Isn't Applying)
CSS specificity determines which rule wins when multiple selectors target the same element. Learn the calculation and how !important overrides it.
Published September 21, 2026
Specificity is the algorithm browsers use to decide which CSS rule applies when multiple rules target the same element with conflicting declarations. It's calculated by counting selector types: ID selectors count the most, then classes/attributes/pseudo-classes, then element selectors count the least.
Common causes
- Multiple stylesheets or rules can legitimately target the same element (e.g. a component class and a more specific override), and the browser needs a deterministic way to resolve the conflict
How to fix it
- Favor low-specificity selectors (single classes) throughout a codebase so overrides stay predictable and don't require increasingly specific selectors to fight each other
- If a style genuinely isn't applying, check specificity first with browser DevTools — it shows exactly which rule won and why, before assuming it's a syntax error
- Avoid !important except as a last resort — it overrides normal specificity rules entirely and makes future overrides much harder to reason about
Example
#nav .link { color: red; } /* specificity: 1 ID, 1 class */
.link { color: blue; } /* specificity: 1 class — loses to the rule above */FAQ
Does the order of CSS rules matter?
Only when specificity is equal — in a tie, the rule that appears later in the stylesheet (or is loaded later) wins. Higher specificity always beats a later rule with lower specificity.