can't override inline style with ! important property?

Question

I have a div which defined as follow:

<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 this!) I need to override the background color as well as the color.

I have tried:

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

but doesn't work. Also tried .div_box { ... } and still not working.

So my question is, how am I override the above div style without manually changing the inline style?

Answer 1

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

Since you can't remove the inline style, as pointed out (that I skipped over), if you can use Jquery, you can use this:

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

to strip the background-color and color attribute from the inline style where .div box appears. The only added issue here, is that it will strip this everywhere the class is called.

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

Answer 2

Inline CSS overides CSS stylesheets. Both of them are marked !important, in your case so you can't use this css trick to change the div color.

Short answer, you can't do what you want. It,s possible only if inline CSS would not have been marked as !important.