When it comes to important declarations, the cascade origin and layer orders are reversed. Without the important flag, declarations in the author’s style sheets override declarations in a user’s style sheet, which override declarations in the user-agent’s default style sheet.
When a declaration is important, the order of precedence is reversed. Declarations marked as important in the user-agent style sheets override all important declarations in the user style sheets. Similarly, all important declarations in the user style sheets override all important declarations in the author’s style sheets. Finally, all important declarations take precedence over all animations.
Note: All important declarations take precedence over all animations. !important is not valid within @keyframes animation declarations.
Reversing the precedence order for important declarations ensures users with special needs, such as personalized color schemes or large fonts, can override author styles when needed by marking some declarations in their user’s style sheet as important. It also guarantees malicious extensions can’t override important user-agent styles, which might break functionality or negatively impact security.
Does anything have precedence over important declarations? Yes, transitions. CSS transitions are a way to control the speed at which the property changes from one value to another. While transitioning from one value to another, a property will not match a specific important declaration.
a
{
color
:
red !important
;
background-color
:
yellow;
transition
:
all 2s linear;
}
a:hover
{
color
:
blue !important
;
background-color
:
orange !important
;
}
In this example, the color and background-color properties will transition to the hovered state over two seconds. Even though default states are normal declarations and hover states are !important declarations, the transition does happen.
