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.

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.

Within each of the three origins for style sheets – author, user, and user-agent – normal declarations in unlayered styles override layered style declarations, with the last declared having precedence over the layers declared before it. Important declarations reverse the order of precedence: important declarations in the first layer take precedence over important declarations in the next layer, and so on. Also, all the important declarations have precedence over important declarations made outside any layer.

Inline styles are styles defined using the style attributes. They can also be normal or important. Inline normal styles take precedence over all normal declarations, no matter the origin. Inline important styles take precedence over all other important author styles, no matter the layer, but important styles from user's or user-agent's style sheets and transitions override them.

While !important is not part of determining specificity, it is related. Important declarations override all other declarations from the same origin and cascade layer.

#myElement#myElement#myElement .myClass.myClass p:hover {
  color: blue;
}

p {
  color: red !important;
}

This example displays a case of over-specifying a selector. No matter how high the selector specificity matches a normal declaration, an important declaration from the same source and cascade layer will always have precedence. In this case, the paragraph will always be red.

When two important declarations from the same origin and layer apply to the same element, browsers select and use the declaration with the highest specificity.

#myElement p {
  color: green !important;
}

p {
  color: purple !important;
}

In this case, the selector specificity matters. Only if the selectors had the same specificity would source order matter.

Declaring a shorthand property with !important sets all of sub-properties as important. The two following selector style blocks are equivalent:

p {
  background: blue !important;
}

p {
  background-image: none !important;
  background-position: 0 0 !important;
  background-size: auto auto !important;
  background-repeat: repeat !important;
  background-origin: padding-box !important;
  background-clip: border-box !important;
  background-attachment: scroll !important;
  background-color: blue !important;
}

This example shows one of the several reasons avoiding the important flag is generally recommended.

When the !important flag is added to a custom property value declaration, it makes the value assignment important. The !important flag is then stripped from the custom property value. The !important flag is not passed as part of the custom property value to the var() function.

:root {
  --myColor: red !important;
  --myColor: blue;
}
p {
  color: var(--myColor);
}
blockquote {
  color: var(--myColor);
  color: purple;
}

In this example, the paragraph will be red, not blue, as the custom property value assignment is important. The blockquote will be purple, because the purple normal declaration comes after the normal red declaration.

Avoid using !important to override specificity. When intentionally creating important declarations for UI requirements, comment in your CSS code to explain to maintainers why they should not override that feature.

Even when working to override high-specificity styles not under your control, such as styles in a 3rd party plugin declared with an id selector, you don't need to use !important. Consider instead importing the 3rd party stylesheet script into a named or anonymous layer as your first cascade layer, instead of using !important. As long as the external styles do not include important declarations, your styles will take precedence over the widget styles, no matter the specificity.

If you need to override an external stylesheet containing important declarations, create a cascade layer containing the needed overrides, and declare that layer first.

Important styles from a user stylesheet take precedence over the author style sheet's important declarations, meaning adding an !important flag to a site's styles will not prevent individual users with special requirements, such as large fonts, from being able to override your styles by adding important styles in their own user's style sheet.

• CSS Specificity
• CSS Cascade