!important Declaration

When defining CSS styles, certain properties may be critical enough to require precedence over others. In such cases, the !important keyword is used to indicate that a specific declaration carries more weight than a standard property: value;.

In CSS, this is known as an important declaration. It is implemented by adding !important before the semicolon (;) at the end of a declaration, as in property: value !important;.

When !important is applied to a property value, it overrides the standard cascade rules, causing the specified value to take precedence over other declarations.

Prerequisites

A solid understanding of the standard CSS cascade will help you better understand how the !important declaration overrides normal style priority, causing the specified property value to take precedence over others.

CSS Specificity

Overriding Style Priority

Demo: !important declaration 
<style>
    #myid {
        background-color: red;
    }
    .important-background {
        background-color: yellowgreen !important; /* !important declaration */
    }
</style>
<p id="myid" class="important-background">
    CSS !important Usage – Overriding Style Priority
</p>
Rendered Output

As shown in the demo above, although the #myid selector has higher specificity than .important-background, the value of the background-color property is applied as yellowgreen.

This occurs because the !important declaration overrides the cascade, causing the specified property value to take precedence over other declarations.

Things to Keep in Mind

Consider the following points when implementing the !important declaration.

Whitespace Between ! and important

Adding whitespace between ! and important in !important is technically permitted. While a format like ! important is valid, it is generally not used in practice.

Documenting the Reason for !important

When using !important, it is best practice to include a comment explaining why it was necessary. This significantly improves the maintainability and readability of your CSS for future reference.

CSS 
.important-background {
    background-color: yellowgreen !important; /* This background color must not be changed. */
}

Things to Watch Out For

There are several points to be aware of when using the !important declaration.

Multiple !important Declarations on the Same Property

HTML 
<style>
    #myid {  /* specificity = 0,1,0,0 */
        background-color: red !important;
    }
    .important-background {  /* specificity = 0,0,1,0 */
        background-color: yellowgreen !important;
    }
</style>

<p id="myid" class="important-background">
    CSS !important Usage – Overriding Style Priority
</p>
Rendered Output

As shown in the example above, when multiple !important declarations are applied to the same property of the same element, they are assigned equal importance. In this case, standard cascade rules apply, and the value from the selector with higher specificity is used.

CSS Specificity

While !important declarations do not gain additional specificity, they are handled separately from normal declarations. In practice, !important declarations are compared only with other !important declarations, while normal declarations are compared only with other normal declarations. Therefore, when an !important declaration conflicts with a normal declaration, the !important declaration takes precedence.

Prohibition Inside @keyframes Blocks

The !important declaration is ignored when used within @keyframes blocks. Consider the following example:

HTML 
<style>
    .important-background {
        animation: bg-animation 3s infinite both;
    }
    @keyframes bg-animation {
        0% {
            background-color: red !important;
        }
        100% {
            background-color: yellowgreen;
        }
    }
</style>

<p class="important-background">
    CSS !important Usage – Overriding Style Priority
</p>
Rendered Output

In the example above, background-color: red !important; is defined inside a @keyframes block. In this context, the !important keyword is ignored, and the declaration behaves as a normal property assignment.

Consequently, the animation proceeds as expected, transitioning to background-color: yellowgreen; at the 100% mark.

Using Shorthand Properties with !important

Consider the following example:

HTML 
<style>
    .important-background {
        border: 2px solid red !important;
    }
    .important-background:hover {
        border-color: blue; /* Cannot override the !important declaration */
    }
</style>

<p class="important-background">
    CSS !important Usage – Overriding Style Priority
</p>
Rendered Output Hover over the element.
The border-color: blue; declaration is not applied.

In the example above, the shorthand declaration border: 2px solid red !important; is equivalent to applying !important to all corresponding longhand properties:

  • border-width: 2px !important;
  • border-style: solid !important;
  • border-color: red !important;

Consequently, the border-color: blue; declaration in the :hover state cannot override the existing !important declaration.

This behavior is equivalent to writing the following code:

HTML 
<style>
    .important-background {
        /* border: 2px solid red !important; */
        border-width: 2px !important;
        border-style: solid !important;
        border-color: red !important;
    }
    .important-background:hover {
        border-color: blue; /* does not override */
    }

</style>
<p class="important-background">
    CSS !important Usage – Overriding Style Priority
</p>

When Should You Use !important?

  • Overriding inline styles that cannot be modified.
  • In particular, when CSS is applied via JavaScript using the style attribute, it is treated as an inline style. In such cases, using !important is useful when you want to prevent those styles from being overridden.
  • Overriding highly specific CSS rules when no better alternative exists.

Browser compatibility

Browser compatibility for the !important declaration
Declaration
Desktop Chrome
Chrome
Desktop Edge
Edge
Desktop Firefox
Firefox
Safari
Safari
!important Yes Yes Yes Yes

Specifications

Specification for the !important declaration
Specification
!important CSS Cascading and Inheritance Level 3
#importance

References

See also