Codectionary / Developer documentation / CSS

How the CSS Cascade Chooses a Style

Follow the practical order in which CSS resolves competing declarations, from relevant rules to layers, specificity and source order.

Which declaration wins?

Several rules can set the same property on the same element. The cascade finds the winning declaration; only then do inheritance and a property’s initial value fill in gaps. For a beginner, the key question is not “Which selector looks strongest?” but “Which relevant declarations are still competing at each stage?”

Only relevant rules participate. A selector must match the element, and a media query must match the current environment. A correctly written rule in an inactive print query cannot set a screen style.

Use the cascade in the right order

The browser first considers relevance, then origin and importance. User-agent (browser), user and author styles have different priorities, and !important changes that order. Within an origin, cascade layers also have priority: for normal author declarations, unlayered rules outrank layered rules. Only after those decisions does selector specificity compare remaining rules in the winning origin and layer.

If specificity is still tied, scoped-rule proximity can matter when @scope is involved. If the remaining declarations are still tied, later source order wins. CSS transitions and animations also occupy specific places in the full cascade; do not describe the algorithm as simply “the last rule wins”.

  1. Keep declarations whose selectors and conditions apply.
  2. Compare origin and importance, including relevant cascade layers.
  3. Compare specificity among declarations still competing.
  4. If applicable, compare scoping proximity; then use source order to break a remaining tie.

See a source-order tie

Both rules below target .button, are normal author declarations, share a layer and have equal specificity. The later green declaration wins. Reverse their order and blue wins. If the first rule had a higher-priority origin, important flag or layer, source order alone would not decide the result.

This is common when two component stylesheets define the same class. Use DevTools to find both declarations and understand why one is crossed out before changing the stylesheet.

HTML

<button class="button">Save</button>

CSS

.button { color: blue; }
.button { color: green; } /* Same priority and specificity; later wins */

When no declaration wins on the element

If no relevant declaration sets an inherited property such as color on a child, the child receives its parent’s computed value. A non-inherited property uses its initial value instead. This explains why text colour can flow through a component while its border does not.

The inherit, initial, unset and revert keywords let a declaration request a particular behaviour. They are not a substitute for understanding which declaration the cascade selected.

Debug a conflict systematically

Inspect the target element and confirm each selector matches. Check whether media queries are active, whether a declaration is important or layered, and then compare specificity. Only consider source order after those factors. Remove redundant overrides where possible rather than escalating every disagreement with !important.

After editing, save and reload at the relevant viewport and colour-scheme settings. A correct-looking screenshot at one width does not prove the rule wins under another condition.

Syntax

.button { color: blue; }
.button { color: green; }

Examples

A tie resolved by source order

The button text is green when both rules apply in the same layer and origin.

.button { color: blue; }
.button { color: green; }
  1. Both class selectors match the same button and have equal specificity.
  2. With equal origin, importance, layer and scope, the later declaration wins.
  3. The resulting text colour is green. Reordering the rules changes the result; a higher-priority layer or important flag could change it for a different reason.
HTML used by this example
<button class="button" type="button">Both rules match me</button>

Best practices

  • Check relevance, origin and layers before comparing selector specificity.
  • Use source order only to settle a genuine tie.
  • Inspect computed styles instead of reaching immediately for !important.

Runtime & versions

Web browsers. Feature availability depends on the language and runtime version used by your project; consult the official reference below.

CSS specifications (modules)

Specifications & further reading