The Cascade, Specificity, Inheritance, and Defaulting

Intermediate

CSS often gives several declarations a chance to style the same property. The cascade is the algorithm that decides which applicable declaration supplies the value. It is separate from selector matching: selectors determine which elements a rule can match, while the cascade compares applicable declarations.

The cascade is a sequence of filters

Think of the cascade as progressively narrowing the declarations that can win. First CSS considers which declarations are applicable, then their origin and importance, then cascade layers where layers participate, then specificity, then scoping proximity where applicable, and finally source order. A later stage matters only when earlier stages have not produced a single winner.

?

Origins and importance

Declarations can come from different origins, including user-agent, user, and author styles. For normal declarations, the author origin has higher precedence than the user and user-agent origins. Important declarations use a reversed origin ordering, which gives user and user-agent important declarations stronger precedence than author important declarations. CSS also has transitions and animations in the cascade model; those are not interchangeable with ordinary author rules.

?

Specificity belongs to the cascade, but selectors define its inputs

Specificity is a weight assigned to a selector. When competing declarations are otherwise tied at the relevant cascade stage, the declaration whose selector has greater specificity wins. The Selectors lesson owns the selector forms and the detailed rules for calculating selector specificity; this lesson owns how that specificity participates in conflict resolution.

?

Source order is the final tie-breaker

When competing declarations have the same origin, importance, layer position, specificity, and applicable scoping proximity, source order can decide the winner. The later declaration wins. This is why moving a rule later in a stylesheet can change the result without changing its selector.

?

Inheritance is not another cascade tie-breaker

Inheritance happens when a property gets its value from an element’s parent according to that property’s inheritance rules. It is not a stronger selector and it does not make a descendant declaration lose. First understand whether the property is inherited and what value the parent provides; then a declaration on the descendant can still supply its own value.

?

Initial, inherited, unset, and revert values

CSS-wide keywords let a declaration explicitly choose how a property gets its value. `initial` uses the property’s initial value. `inherit` takes the parent’s computed value. `unset` behaves as `inherit` for inherited properties and as `initial` for non-inherited properties. `revert` rolls the value back to the value produced by an earlier cascade origin or, when appropriate, the user-agent stylesheet. These keywords belong to value handling, but their effect is important when diagnosing cascade results.

?

Where layers, nesting, and scoping fit

Cascade layers, CSS nesting, and scoped styles extend the cascade model and will receive their own focused lesson after this core cascade rehabilitation. They must not be taught here as competing duplicate algorithms. The upcoming lesson will show how layer order and scope proximity enter the cascade without rewriting the foundational cascade model.

Debugging checklist

When a declaration appears not to work, check in order: does the selector match; is the declaration valid; is the property applicable; what origin and importance does it have; does a cascade layer affect it; what specificity do the competing selectors have; does scope proximity matter; and which declaration appears last among otherwise tied candidates? Only then inspect layout or painting behavior.