!important
The `!important` rule in CSS overrides all other styling declarations for a property, including inline styles and higher specificity rules.
property: value !important;This static page keeps the syntax and examples indexed for search, while the coding app handles interactive exploration and saved references.
What it does
Overview
The `!important` rule in CSS overrides all other styling declarations for a property, including inline styles and higher specificity rules.
The `!important` declaration in CSS is a powerful but often misused tool that allows a specific CSS property value to override all other conflicting declarations for that property on an element, regardless of specificity or source order. When `!important` is appended to a property value (e.g., `color: red !important;`), it elevates that declaration's priority above virtually all other CSS rules, including inline styles and even more specific selectors. The only exceptions are other `!important` rules, where the one with higher specificity or later declaration order wins. While it can be useful for debugging, overriding third-party library styles, or for user stylesheets (which have a higher `!important` priority than author styles), its overuse is generally considered a bad practice. It breaks the natural cascade and specificity rules, making CSS harder to maintain, debug, and extend. It creates 'specificity wars' where developers resort to adding more `!important` declarations to override previous ones, leading to unmanageable stylesheets. Best practices suggest using `!important` sparingly, if at all, and only when absolutely necessary, preferring to resolve conflicts through proper specificity management, better selector design, or by refactoring the CSS architecture.
Quick reference
Syntax
property: value !important;See it in practice
Examples
Overriding a more specific selector with !important
<style>
#my-element { color: blue; } /* High specificity */
.my-class { color: red !important; } /* Lower specificity, but !important */
</style>
<p id="my-element" class="my-class">This text will be red.</p>The paragraph text will be red.
Despite the ID selector having higher specificity, the `!important` declaration on the class selector forces the text color to be red.
Overriding inline styles with !important
<style>
p { color: green !important; }
</style>
<p style="color: orange;">This text will be green.</p>The paragraph text will be green.
An `!important` rule in a stylesheet can even override an inline style, which normally has the highest specificity.
When !important conflicts with another !important
<style>
.box { background-color: red !important; }
#special-box { background-color: blue !important; } /* Higher specificity */
</style>
<div class="box" id="special-box"></div>The div will have a blue background.
When two `!important` rules conflict, the one with higher specificity wins. Here, the ID selector is more specific than the class selector.
Debug faster
Common Errors
Specificity Wars
Cause: Overusing `!important` to force styles, leading to a cascade of `!important` declarations that become difficult to manage and debug.
Fix: Avoid `!important` unless absolutely necessary. Instead, resolve styling conflicts by understanding and leveraging CSS specificity, refining your selectors, or restructuring your CSS. If you must use it, document why it's necessary.
.element { color: red !important; }
.element.active { color: blue !important; }
.element.active.highlight { color: green !important; } /* Escalating !important usage */Runtime support
Compatibility
Source: MDN Web Docs
Common questions
Frequently Asked Questions
The `!important` rule in CSS overrides all other styling declarations for a property, including inline styles and higher specificity rules.
Specificity Wars: Avoid `!important` unless absolutely necessary. Instead, resolve styling conflicts by understanding and leveraging CSS specificity, refining your selectors, or restructuring your CSS. If you must use it, document why it's necessary.