How to Override !important

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.

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

  1. 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.

Let’s see examples with a higher specificity:

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.

  1. You can add the same selector after the existing one.
td {
  height: 50px !important;
}

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

Create HTML

  • Use a <div> element with the class, id, and style attributes.
  • Add !important to the style attribute.
<div class="text-class" id="text-id" style="background-color:#f13 !important;">
  Example of overriding the !important rule.
</div>

Add CSS

  • Add style to the class and id attributes. Set the background -color property for them and add the !important rule.
  • Style the <div> by specifying the font-size, margin-top, text-align, color, and font-weight properties.
  • Add the background-color property and use the !important rule.
  • Set another color for the <div> with the background-color property and add !important.
  • Set background-color for the class and id attributes of the <div> element and add !important.
#text-id {
  background-color: green !important;
}
.text-class {
  background-color: white !important;
}
div {
  font-size: 25px;
  margin-top: 30%;
  text-align: center;
  color: #1d1d69;
  font-weight: bold;
  background-color: black !important;
}
div {
  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:

<!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: 30%;
        text-align: center;
        color: #1d1d69;
        font-weight: bold;
        background-color: black !important;
      }
      div {
        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:#f13 !important;">
      Example of overriding the !important rule.
    </div>
  </body>
</html>

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.