Cascade + specificity — which rule wins?
When multiple rules target the same element, the browser picks the winner by specificity. IDs beat classes, classes beat tags.
style.css
v3.1
style.css — the CSS rules
index.html — the HTML structure (what the CSS targets)
Live preview
updates as you type
🧠 How it works
Specificity is a 3-number score: (IDs, classes, tags). div = (0, 0, 1) = 1 point. .card = (0, 1, 0) = 10 points. #special = (1, 0, 0) = 100 points. div.card.box = (0, 2, 1) = 21 points. Higher specificity wins. Ties go to the LAST rule defined. Inline style (style='...') beats all selectors. !important beats everything — use it sparingly (it's a smell). Order of resolution: !important > inline > ID > class > tag > * (universal).
✏️ Try these changes
-
Change .card to div.card (adds a tag, doesn't change specificity)→ still green — specificity unchanged -
Change .card to .card.card (doubles the class)→ now (0, 2, 0) — beats single .card, ties with ID? No, ID still wins -
Remove !important from .override→ orange loses to inline style="purple" -
Add !important to #special→ red beats orange — ID !important wins