CSS Specificity: The Real Reason Your Style Isn't Applying

It's rarely a typo — it's usually specificity

One of the most common CSS frustrations is writing a rule that looks correct, appears in the stylesheet, and simply doesn't apply. Nine times out of ten, this isn't a syntax error — it's specificity, a scoring system browsers use to decide which of several conflicting rules targeting the same element actually wins.

How the score is actually calculated

Every CSS selector gets a specificity score based on three categories, roughly in this priority order: ID selectors (like #header) count the most, class selectors, attribute selectors, and pseudo-classes (like .nav or :hover) count next, and plain element selectors (like div or p) count least. A selector combining more of the higher-priority categories beats one with fewer, regardless of the order the rules appear in the file — which is the part that trips people up, since we usually assume "later in the file wins."

Why order only matters as a tiebreaker

Source order (later rules overriding earlier ones) only decides the outcome when two selectors have the exact same specificity score. A single class selector written at the very top of a stylesheet will still lose to an ID selector written at the very bottom, which is exactly the scenario that confuses developers who assume CSS always works top-to-bottom.

The !important escape hatch, and why it's risky

Adding !important to a declaration overrides normal specificity rules almost entirely, forcing that value to win regardless of the competing selector's score. It solves the immediate problem, but it also makes future overrides much harder — once one rule uses !important, the next developer often has to reach for !important too just to override it, creating an escalating pattern most style guides recommend avoiding except as a last resort.

Keep your CSS readable enough to debug

Specificity conflicts are much easier to spot in cleanly formatted, consistently indented CSS than in a minified or messy stylesheet. Our CSS Formatter reformats compressed or inconsistent CSS into a clean, readable structure, making it easier to scan for competing selectors targeting the same element.