Lesson 7 — CSS Selectors & Specificity Cheat Sheet

Full-Stack

In one line: When multiple CSS rules target the same element, specificity decides which one wins.

Selector Types

1Element — p, div, h1 (lowest specificity)

2Class — .card (medium specificity)

3ID — #header (high specificity)

4Inline style — style="..." (higher still)

5!important — overrides everything (avoid overusing)

element < .class < #id < inline style < !important

p { color: blue; }

Specificity: 0-0-1

.text { color: red; }

Specificity: 0-1-0

#main { color: green; }

Specificity: 1-0-0