Is it possible to override / remove background: none!important with jQuery?

Question

I have an element which should have a background image, but it's been given the following style in a stylesheet that I'm not able to access/modify:

#an-element li {
  background: none !important;
}

Is it possible to undo that style with jQuery? I've tried to add background: inhert!important with jQuery in two ways: by adding an inline style, and by removing an applied style. Neither work.

Here is a Fiddle illustrating the problem: http://jsfiddle.net/9bJzk/1/

UPDATE: I had the wrong fiddle link, please look again.

UPDATE 2: I cannot edit the stylesheet. I've changed the title to be more clear now. I have to do this with jQuery as I can't control the loading order of the CSS files, but can run jQuery onload.

UPDATE 3: I can't explicitly set the 'kitten' pic (see the fiddle) with a more accurate CSS selector like selector like #an-element .image-list li as some are suggesting as those images are being written out on the fly. The jsFiddle was just an example. To make it clearer still: Can the effects of the background: none be undone with PURE jQuery and NOT editing of any stylesheets. Thanks for sticking with this!

Answer 1

div { background: none !important }
div { background: red; }

Is transparent.

div { background: none !important }
div { background: red !important; }

Is red.

An !important can override another !important.

If you can't edit the CSS file you can still add another one, or a style tag in the head tag.

Answer 2

Several problems arise in this question.

Problem #1 - css Specificity (how to override important rule).

According to specification - to override this selector your selector should be 'stronger' which mean it should be!important and have at least 1 id, 1 class and something else - according to you creating this selector is impossible(as you can't alter page content). So the only possible option is to put something into element style which (could be done with js). Note: style rule should also have !important to override.

Problem #2 - background is not a single property - it is a set of properties (see specification)

So you really need to know what are exact names of properties you want to change (in your case it would be background-image)

Problem #3 - How to remove rule already applied (to get previous value)?

Unfortunately css have no mechanism to dismiss rule which qualify for an element - only to override with "stronger" rule. So you won't be able to solve this task with just setting value to something like 'inherit' or 'default' cause value you want to see is neither inherit from parent nor default. To solve this problem you have couple of options.

1) You may already know what is the value you want to apply. For example you can find out this value based on selector used. So in this case you may know that for selector ".image-list li" you need background-image: url("http://placekitten.com/150/50"). If so - just you this script:

jQuery(".image-list li").attr('style', 'background-image: url("http://placekitten.com/150/50") !important; ');

2) If you don't know the value then you can try to alter page content in such a way, that rule you want to dismiss is no longer qualify for element, whereas rule you want to be shown - still qualify. In this case you may temporary remove id from container element. Here is the code:

jQuery("#an-element").attr('id', '');
var backgroundImage = jQuery(".image-list li").css('background-image');
jQuery("#an-element").attr('id', 'an-element');
jQuery(".image-list li").attr('style', 'background-image: ' + backgroundImage + ' !important; ');

Here is link to fiddle http://jsfiddle.net/o3jn9mzo/

3) As third solution - you may generate element which will qualify for desired selection to find out property value - something like this:

var backgroundImage = jQuery("<div class='image-list'><li></li></div>").find('li').css('background-image');
jQuery(".image-list li").attr('style', 'background-image: ' + backgroundImage + ' !important; ');

P.S.: Sorry for really late response.