CSSIntermediate~4h

CSS: Cascade & Specificity

Which declaration actually wins

Three rules claim the same element and the browser keeps one. Six comparisons decide it, and specificity is only the fifth — which is why adding another class so often changes nothing at all. This is the whole sort order, scored by hand, from the ID column down to a var() that fails without saying so.

Start this project See the modules

Modules: 5
Drills: 8
Build steps: 3
Time: ~4h

Walk out able to

Read any conflict and name the step that settled it: origin, importance, the style attribute, layer order, specificity, or simply which rule came last.

What you drill

Specificity by column

IDs, classes, types, and what :where() is worth.

The six-step sort

Origin, importance, inline styles, layers, then order.

Inheritance and resets

What a child gets, and what inherit or revert does.

Custom properties, audited

Follow a var() chain, then win an override on purpose.

The pitch

What you practise, and what you leave with

A cascade audit: one page written to be confusing, six predictions made before it is opened, and the browser checking every one.

You will practise

Scoring selectors, and comparing two scores
Origin, importance, inline styles, source order
Cascade layers, including the reversal
Inheritance, reset keywords, custom properties

Afterwards you can

Score any selector, :where() and :is() included
Name the step that settled any conflict
Predict what an element inherits
Follow a var() to a value, or to a failure

Modules

5 modules, 26 items

Lessons explain one idea. Drills repeat it until it sticks. Build steps make something that exists afterwards.

1
Score any selector
~48 min
Put an (A, B, C) on a selector you have never seen, functional pseudo-classes included.
- LessonWhy the winning rule is not obvious4 min
- LessonRead a selector as three columns9 min
- LessonThe four that count differently9 min
- LessonWhat scores nothing at all5 min
- DrillScore a selector on sight11 min
- DrillSay which selector wins10 min
2
Run the cascade in order
~1h
Name the step that settled a conflict instead of adding another class to the selector.
- LessonSix steps, and specificity is fifth9 min
- LessonStep 1: where a declaration came from10 min
- LessonStep 3: the style attribute6 min
- LessonStep 6: and finally, whichever came last5 min
- DrillCall the winning declaration12 min
- LessonLayers are read before specificity9 min
- LessonWhere important flips the layer order8 min
- DrillDecide a fight between layers11 min
3
Predict what a child gets
~47 min
Say what an element computes when no rule targets it, and undo a rule on purpose.
- LessonInheritance is the last resort9 min
- LessonWhat travels is the computed value7 min
- DrillSay what the child computes11 min
- DrillChoose the right reset keyword10 min
- Build stepMeasure a compounding em chain10 min
4
Resolve a custom property
~42 min
Follow a var() chain to a value, and say what happens when it has no value to find.
- LessonA var() is resolved, not pasted9 min
- LessonThe failure that says nothing9 min
- DrillFollow a var chain to a value12 min
- Build stepBreak a custom property on purpose12 min
5
Win an override on purpose
~42 min
Fix a real override without adding a selector, an ID, or an !important.
- DrillWrite the line, not the explanation10 min
- Build stepPut a stylesheet into layers14 min
- LessonAudit a page you wrote to be confusing18 min