CSS Cascade: Ascending Order of Precedence Explained

The CSS cascade determines which declaration wins when multiple rules apply to the same element. It is more accurate to evaluate origin and importance, cascade layers, specificity, scope proximity, and source order than to memorize one simple list.

Practical Decision Order

1. Relevance: only matching selectors and active conditions are considered.
2. Origin and importance: browser, user, and author rules are compared, including important declarations.
3. Cascade layer: layer order can outrank selector specificity between layers.
4. Specificity: more specific selectors win within the same cascade context.
5. Scope proximity: scoped rules closer to the element may win.
6. Source order: if everything else ties, the later declaration wins.

Specificity Example

p { color: navy; }
.note { color: green; }
#summary { color: maroon; }

For a paragraph with both the class and ID, the ID selector normally has higher specificity. Inline styles also have strong author-level priority, but important declarations and origins still matter.

Avoid Specificity Problems

• Use classes for reusable components.
• Keep selectors short and predictable.
• Use cascade layers for resets, components, and utilities.
• Avoid unnecessary IDs in component selectors.
• Use !important sparingly and intentionally.

Debugging Tip

Browser developer tools show matched and overridden declarations. Check the winning rule, its stylesheet, layer, selector specificity, and order before adding a stronger selector.