How to Override !important

It is possible to override !important, although it isn’t recommended to use !important at all. But you can override the !important rule with another !important.

Tags

It is possible to override !important, but first, let’s understand why it’s not recommended to use the !important rule.

Using !important is bad practice and must be avoided as it makes debugging more complicated by breaking the normal cascading in the stylesheet. When we apply two conflicting declarations having the !important rule to the same element, the declaration with a higher specificity will be applied.

Note that !important rules in external or embedded stylesheets always override inline styles with !important, regardless of specificity.

Now, we’ll present the ways of overriding the !important rule.

Add another CSS rule having !important. Then give a selector with a higher specificity (adding a tag, id, or class to the selector) or add a CSS rule having the same selector at a later point than the existing one. In a specificity tie, the last defined rule wins. (Note: specificity is calculated per selector in a comma-separated list, not combined.)

Let’s see examples with a higher specificity:

How to Override !important

table td {
  height: 50px !important;
}

.myTable td {
  height: 50px !important;
}

#myTable td {
  height: 50px !important;
}

The first is the lowest, whereas the third is the highest.

You can add the same selector after the existing one.

How to Override !important

td {
  height: 50px !important;
}

Let’s see step by step how to override the !important rule.

Create HTML

Use a <div> element with the <span class="attribute">class</span>, <span class="attribute">id</span>, and <span class="attribute">style</span> attributes.
Add !important to the <span class="attribute">style</span> attribute.

How to Override !important

<div class="text-class" id="text-id" style="background-color:#ff1133 !important;">
  Example of overriding the !important rule.
</div>

Add CSS

Set the background-color property with !important for the <span class="attribute">class</span> and <span class="attribute">id</span> attributes.
Style the <div> by specifying the font-size, margin-top, text-align, color, and font-weight properties, and add !important to the background-color.
Combine the <span class="attribute">class</span> and <span class="attribute">id</span> selectors and set background-color with !important to demonstrate the highest specificity override.

How to Override !important

#text-id {
  background-color: green !important;
}
.text-class {
  background-color: white !important;
}
div {
  font-size: 25px;
  margin-top: 30px;
  text-align: center;
  color: #1d1d69;
  font-weight: bold;
  background-color: white !important;
}
div.text-class,
div#text-id {
  background-color: yellow !important;
}

Now, we can see the full code.

Example of overriding the !important rule:

How to Override !important

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      #text-id {
        background-color: green !important;
      }
      .text-class {
        background-color: white !important;
      }
      div {
        font-size: 25px;
        margin-top: 30px;
        text-align: center;
        color: #1d1d69;
        font-weight: bold;
        background-color: white !important;
      }
      div.text-class,
      div#text-id {
        background-color: yellow !important;
      }
    </style>
  </head>
  <body>
    <div class="text-class" id="text-id" style="background-color:#ff1133 !important;">
      Example of overriding the !important rule.
    </div>
  </body>
</html>

Try it Yourself »

Here we suggest some rules that are necessary to consider when using !important:

Always find a way to use specificity before even considering the !important rule.
Use the !important rule only on page-specific CSS, which overrides an external CSS.
Do not use the !important rule when writing a plugin/mashup, or on site-wide CSS.