CODEWITHSUNDEEP
jqueryhtmlcss
Bhojendra Rauniyar
Bhojendra Rauniyar

Reputation: 85545

Is there anyway to override the inline important?

Say, I'm using a plugin, component and there is inline-css applied with !important. Now how could I override that css.

Here's an example which would obviously not work as div is more specific but with given important in inline makes it more specific.

<div>
    <p style="color: red !important;">color is red</p>
</div>

div p{
    color: blue !important; /*I wanted to override but this won't work*/
}

demo

Upvotes: 0

Views: 93

Answers (4)

Aniket Sahasrabudhe
Aniket Sahasrabudhe

Reputation: 144

Its possible Use Jquery for this purpose

$(function () {
    $('p')
        .attr('style', 'color: blue !important;')
});

demo :- http://jsfiddle.net/jjWJT/25/

Upvotes: 0

Ganesh K.
Ganesh K.

Reputation: 1

You can not override inline CSS having !important, because it has higher precedence, but using Javasctip/Jquery tweaks you may achieve what you want. you can use this:DEMO

Upvotes: 0

Ming
Ming

Reputation: 4588

If you cannot change the HTML due to the use of a plugin, you can only use JS to get rid of it. Thankfully it's quite simple.

http://jsfiddle.net/daAzr/1/

$('div p[style]').attr('style', '');

(following your example.) Obviously make it a bit more specific for just the bits in that plugin you want to change.

Upvotes: 4

Sowmya
Sowmya

Reputation: 26969

!important rule can not be override.

Instead try removing !important from inline then your css will work fine.

DEMO

Upvotes: 0

Related Questions