$(elem).css("property", "value !important") fails

[fam.lam]

I'm not sure if this is a bug or intentional, but I guess it's a bug. In the FireFox (9.0.1, and maybe earlier versions too) and future webkit browser versions, the following code doesn't work

$("body").css("color", "red !important");

If you leave out the !important it works fine. See also: ​http://jsfiddle.net/GGJHL/

It could be because jQuery calls style[ name ] = value; and these browsers do not support setting properties containing !important that way. The correct way to set it would be style.setProperty(name, value_without_!important, "important");

It would be great if jQuery could also support setting !important styles on browsers that support .setProperty().

[rwaldron]

It's smarter to avoid adding features to the core library and instead defer to the developer and allow them to create a class that can be used instead:

.importantRed {
  color: red !important;
}

$("body").addClass("importantRed");

[anonymous]

I like using css and jquery will solve problem

[anonymous]

If you're not going to fix this please update your docs:

From ​http://api.jquery.com/show/:

Note: If using !important in your styles, such as display: none !important, it is necessary to override the style using .css( "display", "block !important") should you wish for .show() to function correctly.

[anonymous]

This isn't good practice but should at least work or return an error. It simply does nothing.

[anonymous]

Replying to rwaldron:

It's smarter to avoid adding features to the core library and instead defer to the developer and allow them to create a class that can be used instead:

.importantRed {
  color: red !important;
}

$("body").addClass("importantRed");

This won't work for setting a value that needs to be calculated with JS, such as the height of an element.