CSS Specificity & Cascade

CSS Specificity & the Cascade

When multiple CSS rules target the same element, the browser must decide which one wins. This is governed by specificity and the cascade.

Specificity Score (highest wins)

!important — Overrides everything (use sparingly)
Inline styles (style="...")
ID selectors (#id)
Class / pseudo-class / attribute selectors (.class, :hover)
Element selectors (p, div)

The Cascade Rules

When specificity is equal, the last rule in the stylesheet wins (order matters).

💡 Avoid !important in most cases — it makes debugging very hard.

Example

/* Specificity: 0-0-1 (element) */
p { color: gray; }

/* Specificity: 0-1-0 (class) — wins over element */
.intro { color: blue; }

/* Specificity: 1-0-0 (id) — wins over class */
#main { color: red; }

/* !important overrides everything */
p { color: green !important; }

CSS

Full Editor

Related Resources

CSS Reference

Complete tag & property list

CSS How-To Guides

Step-by-step practical guides

CSS Exercises

Practice what you've learned