Can I use jquery to remove/negate css !important rule?

Question

If there is a CSS rule that uses !important, is there a way to remove the !important rule so that I can make further downstream style changes with JS or jQuery?

theirs.css

div.stubborn { display: none !important; }

mine.js

$('.stubborn').fadeIn();  // won't work because of !important flag

Unfortunately, I do not have control over the style applying the !important rule so I need a work-around.

Selvakumar Arumugam · Accepted Answer · 2012-08-09T20:00:03.520

20

Unfortunately, you cannot override !important without using !important as inline/internal style below the included theirs.css.

You can define a !important style and add it to .stubborn then adjust the opacity.. See below,

CSS:

div.hidden_block_el { 
   display: block !important;
   opacity: 0;
}

JS:

$('.stubborn')
    .addClass('hidden_block_el')
    .animate({opacity: 1});

DEMO: http://jsfiddle.net/jjWJT/1/

Alternate approach (inline),

$('.stubborn')
    .attr('style', 'display: block !important; opacity: 0;')
    .animate({opacity: 1});

DEMO: http://jsfiddle.net/jjWJT/

edited Aug 09 '12 at 20:00

answered Aug 09 '12 at 19:48

Selvakumar Arumugam

79,297
15
120
134

10

+1 Sadly this is a the type of hack one needs to employ when there is a explosion at the "!important" factory – Liviu T. Aug 09 '12 at 19:57
1

some good reading http://stackoverflow.com/questions/3706819/what-are-the-implications-of-using-important-in-css http://coding.smashingmagazine.com/2010/11/02/the-important-css-declaration-how-and-when-to-use-it/ – Liviu T. Aug 09 '12 at 20:03
+1 I second _inline_ approach, especially in my case using jQuery Mobile. – Omar Apr 09 '13 at 16:49
+ 1 for inline approach, really. – Juni Brosas Dec 07 '14 at 12:30

score 5 · Answer 2 · answered Aug 09 '12 at 19:58

5

Just add a style="" tag to any images with this issue, hopefully they all have some sort of defining class to them that it's easy to do so.

$('div.stubborn').attr('style', 'display: inline !important;');

jsFiddle DEMO

answered Aug 09 '12 at 19:58

Mark Pieszak - Trilon.io

61,391
14
82
96

Oswaldo Acauan · Answer 3 · 2012-08-09T19:56:36.100

1

You need to create a new class to apply fade.

CSS:

div.stubborn { display: none !important; }
div.stubborn.fade-ready { display: block !important; opacity: 0; }

JS:

$('.stubborn').addClass('fade-ready').animate({opacity: 1}); //to show
$('.stubborn').fadeOut(function() {$(this).removeClass('fade-ready');}); //to hide

DEMO HERE

edited Aug 09 '12 at 19:56

answered Aug 09 '12 at 19:45

Oswaldo Acauan

2,730
15
23

score 0 · Answer 4 · edited May 23 '17 at 12:34

you can add a new css style with the !important added to it that will override the original style

This is from another answer in javascript:

function addNewStyle(newStyle) {
var styleElement = document.getElementById('styles_js');
if (!styleElement) {
    styleElement = document.createElement('style');
    styleElement.type = 'text/css';
    styleElement.id = 'styles_js';
    document.getElementsByTagName('head')[0].appendChild(styleElement);
}
styleElement.appendChild(document.createTextNode(newStyle));
}

 addNewStyle('td.EvenRow a {display:inline !important;}')

this answer is here

Also I believe that you can add styling like this

        .css({ 'display' : 'block !important' });

in jQuery

score 0 · Answer 5 · answered May 05 '14 at 16:50

I have tried several methods, but the best results I've obtained by adding the CSS style (!important) in a separate class, then remove with jQuery:

CSS:

.important-css-here { display: block !important;}

In jQuery:

$("#selector").addClass("important-css-here");

then, when I need:

$("#selector").removeClass("important-css-here");

work like a charm ;-)

Can I use jquery to remove/negate css !important rule?

5 Answers5

Linked

Related