Cascade & Specificity in CSS
From the CSS cheat sheet · Selectors & Specificity · verified Jul 2026
Cascade & Specificity
How CSS determines which styles win when rules conflict
css
/* Specificity (low to high):
Element → 0-0-1 (p, div, h1)
Class → 0-1-0 (.card, :hover, [attr])
ID → 1-0-0 (#header)
Inline → wins over all
!important → overrides everything
*/
/* Cascade order (lowest to highest):
1. Browser defaults
2. External/internal stylesheets
3. Inline styles
4. !important rules
*/💡 Specificity is scored as ID-CLASS-ELEMENT — the higher score wins, left to right
⚡ :where() has 0 specificity — useful for defaults that should be easy to override
📌 Avoid !important — it breaks the cascade and makes debugging painful
🟢 @layer gives you control over cascade order without fighting specificity wars
specificitycascadeinheritance
Continue with CSS
Save the full cheat sheet or work through every related task.