Overwrite! important css

Option 1: Avoid using !important as much as possible

The doc says that !important is a exception and that its use is a bad practice.

It is possible to set priorities, without having to use !important . Unless for some reason you have to use it necessarily. If this is the case, you can see the option 2 of this response.

If you want to prioritize one item over another, you can give it a higher-order tag or identifier, which has more priority. If you want more details about this practice, which is the one recommended by the Mozilla Developer Network, see what is explained in the specification of CSS .

Let's see:

Ejemplo 1, que se podría aplicar a tu caso:

In this example, the div with id will have priority, over the divs with class names. You will see that although the CSS rule relative to the class appears last in the cascade, the rule relative to the id prevails, because the id has priority over the class.

This is a good practice to apply priorities, avoiding the use of !important .

#prioritario {color:red;}

.test {color: blue;}
.test2 {color:green;}

<!-- Daré el mismo id a los dos divs sólo con fines de prueba, 
     no se recomienda tener ids repetidos-->

<div class="test" id="prioritario">Texto1 prioritario en rojo</div>
<div class="test">Texto1 no prioritario</div>
<div class="test2" id="prioritario">Texto2 prioritario en rojo</div>
<div class="test2">Texto2 no prioritario</div>

The example applies what the documentation says:

  

Instead of using !important , consider:

     

Make better use of cascading CSS properties. Use rules   more specific Indicating one or more elements before the element that   you are selecting, the rule becomes more specific and earns more   priority.

See also: Reviewing CSS Style Priority Level on the priority of the elements.

And I recommend reading this article (in English), which gives several convincing reasons to avoid !important : CSS! important Rule: How to Use It Correctly

Why !important is bad practice?

  

When important is used in a style statement, this   statement overwrites any other. The use of !important is one   bad practice and should be avoided because it makes the code more   difficult to purify because it breaks the natural cascade of the leaves of   style . When two statements in conflict with the !important are   applied to the same element, the declaration with greater   specificity.

According to the documentation (link cited above) !important should be used only when there is no other alternative. That is, in two specific cases:

  

• You have a CSS file that establishes visual aspects of your site globally.

  

• You (or others) use inline styles in the elements themselves. This is considered a very bad practice. In this case, you can set   certain styles in your global CSS file as important, surpassing   thus the online styles configured directly in the elements.

  

Option 2: I am obliged for any reason to use !important

If you have no escape and you are required to use !important , the doc also explains the best way to overwrite it:

  

How to overwrite! important

     

A) Just add another CSS rule with !important and either give the   selector a greater specificity (adding a tag, id or class   to the selector), or by adding a CSS rule with the same selector in a   point after the existing one. This works because in case of   tie in specificity, the last rule prevails.

     

Some examples with great specificity:

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

     

B) Or add the same selector after an existing one:

 td {height: 50px !important;}

     

C) Or rewrite the original rule to avoid using !important.

Ejemplo 2, sobre-escribiendo !important:

/* Forma A*/

#prioritario {
  color: red !important;
}

div p {
  color: green !important;
}

.test p {
  color: blue !important;
}


/* Forma B*/

#prioritario-b {
  color: blue !important;
}

#prioritario-b {
  color: red !important;
}

<!-- Forma A según la doc-->


<div class="test">
  <p>Texto A</p>
  <p id="prioritario">Texto A prioritario en rojo</p>
</div>

<!-- Forma B según la doc-->


<div class="test">
  <p>Texto B</p>
  <p id="prioritario-b">Texto B prioritario en rojo</p>
</div>

You must specify a more direct or specific selector on the element to be able to write it:

span{
  color: yellow !important;
}

div section span{
  color: red !important;
}

  <div>
    <section>
      <span>
        hola mundo
      </span>
    </section>
  </div>

You could use JQuery to remove! important from your div