CSS Specificity Explained — Why Your Styles Don't Apply

"My CSS isn't applying" is almost always a specificity fight. The browser scores every selector — the higher score wins.

The scoring

• Inline style="" → 1000
• ID #nav → 100
• Class / attribute / pseudo-class .card [type] :hover → 10
• Element / pseudo-element p ::before → 1

So #sidebar a (101) beats .sidebar .menu .link.active (40) — even though the second looks more specific.

Debugging in 30 seconds

DevTools → Elements → Styles panel. Struck-through rules lost the specificity fight; the winner shows on top with its selector.

How to stay out of trouble

• Style with single classes; never IDs
• Keep selectors flat: .card-title, not .page .card div h3
• Treat !important as a last resort — it starts an arms race
• Equal specificity → later rule wins; use source order deliberately

More in the Complete CSS Guide.