How to apply !important using .css()?

Your jQuery toolkit for !important

We've got various tools in our jQuery toolbox to apply !important. Each has its pros and cons, but the right tool makes the job easier.

Direct !important with .attr()

In our toolbox, .attr('style', ...) is the big hammer to drive !important in:

$("#element").attr('style', 'width: 100px !important'); // Make way! Big hammer coming through


It lets us directly add !important. But beware, it overwrites all inline styles.

The surgical tool: .setProperty()

Need precision? Try setProperty:

$("#element")[0].style.setProperty('width', '100px', 'important'); // I've got surgical precision, baby!


It only changes the specified property, without touching other styles—such a nice guy!

Merging styles, 'cause we care!

To add a new style without nuking the old ones, we can play a bit of string merging:

$('#element').attr('style', function(i, s) { return (s ? s + ' ' : '') + 'width: 100px !important;'; }); // Witness my respect for the ancients


This will add your rule, carefully preserving any existing styles.

Classy !important with .addClass()

.addClass() gives a classy touch to using !important. Simply define a CSS class:

.importantWidth {
  width: 100px !important; // Mr. Important coming through!
}


And then apply it:

$('#element').addClass('importantWidth');


Working with !important: A guide

With great power comes great responsibility. Here's a guide to use !important responsibly and avoid a CSS nightmare.

Defusing the danger of .attr()

.attr('style', ...) with !important is your nuclear option. It can nuke other styles unintentionally. Be sure to defuse it safely!

Boundaries: Where !important fits

Sometimes, !important is the only way to override certain styles. But don't let it become a habit! CSS has cleaner ways to increase specificity.

Get a bigger canvas with IIFE

An Immediately Invoked Function Expression (IIFE) can help manage complex style changes. It's like having a bigger canvas for your masterpiece:

(function(elem) {
  let style = elem.attr('style') || '';
  style += 'width: 100px !important; color: blue;';
  elem.attr('style', style);
})($('#element')); // This masterpiece will make Picasso jealous!


The savior for old browsers

Older IE browsers might need some hand-holding: setProperty calls for polyfills to the rescue!

Extreme measures: .style.cssText

When drastic measures are called for, cssText steps in. It overwrites all styles:

$("#element")[0].style.cssText += 'width: 100px !important;'; // Outta my way, I've got styles to overwrite!


Use this power with caution.

!important: A weapon of last resort

!important should always be your last resort. Overusing it can create a tangled mess of styles that is hard to maintain. Always use !important responsibly!

Diving deep: .css() vs .attr('style', ...)

It's important to understand the difference:

• .css() modifies style properties cleanly and easily.
• .attr('style', ...) can inject !important, but it overwrites the entire style attribute.
• .css('cssText', ...) is equivalent to .attr('style', ...) — it sets the complete inline style.

Removing !important: Maintenance with .removeProperty()

Using !important today doesn't mean it should stay forever! Cleanup is as easy as:

$("#element")[0].style.removeProperty('width'); // Yeah, we had our fun. Now it's cleanup time!


It removes the width property and !important goes out with it!

JS Bin: Seeing is believing

Examples in JS Bin or CodePen show these methods in action. It gives a practical perspective to all the theory.