Sikau

CSS · Day 2 · about 25 min

Selectors and the cascade

Which rule wins?

When rules disagree

One rule says paragraphs are grey, another says notes are red. Which wins? The cascade decides, mostly by specificity — how precise each selector is — and then by order.

Selectors

  • Specificity, lowest to highest: type (p) < class (.note) < id (#intro) < inline style="".
  • Equal specificity? The later rule wins.
  • Some properties like color and font are inherited by children; others like padding aren't.
  • Prefer classes for styling. ids and !important make CSS hard to override later.

The rest of this lesson

  • Counting specificityexplain
  • Inheritance and debuggingexplain
  • Which colour?predict
  • Least to most specificorder
  • Your turnwrite code
  • Badge quizquiz
  • What you learnedrecap

Continue this lesson free — run real code in your browser

Continue with Google

See all 19 lessons of CSS