CSS specificity is the set of rules browsers use to decide which style rule wins when several selectors match the same element. It assigns a weight to each selector type and compares those weights to pick the most specific rule, falling back to source order only when the weights are equal.
Also called: specificity hierarchy, specificity rules
Why it matters
Clients pay for a website that looks exactly as designed; misunderstandings about specificity cause unexpected style changes that can break layouts and require costly re‑work. Consistent styling also reduces the time developers spend debugging visual issues, keeping projects on schedule and within budget.
How it works
When the browser parses the stylesheet it calculates a four‑part numeric value for each selector: inline styles (1,0,0,0), ID selectors (0,1,0,0), class, attribute and pseudo‑class selectors (0,0,1,0), and element and pseudo‑element selectors (0,0,0,1). The values are compared lexicographically; the higher value wins, and if the values are identical the rule that appears later in the stylesheet overrides the earlier one.
The mistake people make
A frequent error is assuming that the last rule written always overrides earlier ones, ignoring the specificity calculation. When developers rely on this assumption they may find their styles ignored, leading them to use the !important flag as a band‑aid, which makes future maintenance harder and can cause further conflicts.
