Does the cascade run before or after specificity?

Origin and importance are checked first. Only when two declarations share the same origin and importance does the cascade fall through to cascade layers, then specificity, then source order. So a high-specificity author rule still loses to a user-agent !important rule.

Why does !important reverse the origin order?

Normal declarations rank author over user over user-agent so page authors get the final say. For accessibility, important declarations reverse that: a user's !important must be able to override an author's !important, for example to force larger text. So the important order is user-agent, then user, then author from low to high.

Where do CSS animations and transitions sit?

Animations sit just below author !important and above author normal declarations, while transitions sit at the very top, above even author !important. This lets a running transition visually take precedence so it does not get stuck behind a static important rule.

How do cascade layers fit in?

Cascade layers (@layer) subdivide the author origin. Within author normal declarations, unlayered styles win over layered ones, and later layers win over earlier ones. With !important the layer order reverses, mirroring the origin reversal.

What is the user origin?

User styles are stylesheets the end user applies to override pages, such as a custom browser stylesheet or an accessibility extension. They rank between user-agent defaults and author styles for normal declarations, and they are powerful when marked !important.

CSS Cascade Origin Levels

Email me this result

Get this tool's output sent to your inbox, plus one useful tool a week. No spam, unsubscribe any time.

What the cascade decides

When several CSS declarations set the same property on the same element, the cascade picks the winner. Before specificity or source order ever come into play, the cascade first sorts declarations by their origin (who wrote them) and importance (normal vs !important). Getting this order right explains why a heavily-specific author rule can still lose to a humble user-agent default marked !important.

How it works

The cascade compares declarations top to bottom through these tiers (highest priority first):

Transitions
User-agent !important
User !important
Author !important
CSS animations
Author normal
User normal
User-agent normal

The key insight is the !important reversal: for normal declarations the order is author over user over user-agent, but for !important declarations it flips to user-agent over user over author. This protects user and accessibility overrides. Cascade layers (@layer) subdivide the author tiers, and only when two declarations tie on all of the above does the engine fall through to specificity and then source order.

Tips and notes

A transition always wins so animation never jams behind a static !important rule. Within author styles, unlayered declarations beat layered ones for normal rules — but that too reverses under !important. If a rule “won’t apply” despite high specificity, check whether something higher in this origin table (often a user-agent or user !important) is quietly outranking it. The comparison tool below resolves any two declarations for you.