Cannot override inline style! important property?

Question

I have a div that is defined as follows:

<div style="background-color: rgb(217, 240, 211) ! important; color: rgb(0, 102, 2) ! important;" class="div_box">... ... </div> 

since the div is currently using the inline style (which I hate!) I need to override the background color as well as the color.

I tried:

 .div_box[style] { background-color: rgb(216, 219, 215) ! important; color: rgb(94, 94, 94) ! important; } 

but does not work. Also tried .div_box {...} and still does not work.

So my question is: how do I redefine the above div style without manually changing the inline style?

Answer 1

Inline CSS overrides CSS stylesheets. Both of them are marked important in your case, so you cannot use this css trick to change the color of the div.

The short answer is, you cannot do what you want. This is only possible if inline CSS has not been flagged as important.

Answer 2

http://jsfiddle.net/UkpnZ/3/

Since you cannot remove the inline style as indicated (which I missed), if you can use jquery, you can use this:

 $('.div_box').css('background-color', ''); $('.div_box').css('color', ''); 

to remove the background-color and color attribute from the inline style where the .div field appears. The only added problem here is that it will split it wherever the class is called.

Using this method, you will no longer need !important in your stylesheet.