Apply CSS !important with jQuery .css()

You will learn why jQuery.css() rejects values containing !important, how the CSS cascade decides which rule wins, and how to set an inline important declaration safely with style.setProperty().

!important is not part of a CSS property's value. It is a priority flag attached to a CSS declaration.

For example, CSS treats this as three separate parts:

width: 100px !important;

• Property name: width
• Value: 100px
• Priority: important

jQuery's .css() method is designed to set the property value:

$("#elem").css("width", "100px");

When given "100px !important", it passes an invalid value for width to the browser. The browser rejects it, so no inline declaration is added.

Use the browser's DOM style API when you need to set the priority:

document.querySelector("#elem").style.setProperty("width", "100px", "important");

This changes only the width declaration. It does not replace or parse style.cssText.

In the normal author stylesheet cascade, an inline !important declaration outranks an !important declaration from an external stylesheet. However, a running CSS transition can temporarily control the displayed value, and user-origin important styles can outrank author styles.

Think of a CSS declaration as a note attached to an element:

• The property is the label: width.
• The value is the instruction: 100px.
• !important is a red high-priority stamp on that note.

.css() lets you write the instruction, but it does not provide a place to add the priority stamp. setProperty() accepts all three pieces separately, including the priority.

Use setProperty(propertyName, value, priority) on the element's style object:

const element = document.querySelector("#elem");
element.style.setProperty("width", "100px", "important");

With a jQuery selection, get the first matching DOM element:

$("#elem")[0].style.setProperty("width", "100px", "important");

Or apply it to every matched element:

$(".panel").each(function () {
  this.style.setProperty("width", "100px", "important");
});

The third argument must be "important", without the exclamation mark.

To remove only the inline width declaration later:

$("#elem")[0].style.removeProperty("width");

After removal, the stylesheet rule applies again.

Consider this stylesheet and script:

#elem {
  width: 250px !important;
}

const element = $("#elem")[0];
const calculatedWidth = 100;

element.style.setProperty("width", `${calculatedWidth}px`, "important");

Execution steps:

1. The stylesheet supplies width: 250px !important.

2. JavaScript calculates calculatedWidth as 100.

3. The template literal creates the value "100px".

4. setProperty() adds this inline declaration:

   <div id="elem" style="width: 100px !important"></div>
   

5. Both declarations are important author declarations.

6. The inline important declaration wins over the external stylesheet's important declaration, so the used width is 100px.

You can inspect the final cascade in browser DevTools under the element's Styles or Computed panel.

• Resizable panels: Calculate a width from pointer movement and force it over a legacy stylesheet rule.
• Embedded widgets: Override CSS from a host page when a widget must maintain a required layout.
• Print or display modes: Apply a computed size or visibility rule when a mode is enabled.
• Compatibility code: Temporarily override older CSS that cannot yet be changed.
• UI libraries: Apply a short-lived style while integrating with third-party components that use overly specific or important rules.

Use !important sparingly. If you own the stylesheet, changing the selector structure or class-based state is usually easier to maintain.

In production code, avoid scattering direct important declarations throughout event handlers. Put the operation in a small helper so its purpose and cleanup are clear:

function setImportantStyle(element, property, value) {
  element.style.setProperty(property, value, "important");
}

function clearInlineStyle(element, property) {
  element.style.removeProperty(property);
}

const panel = document.querySelector("#panel");
const width = Math.max(240, window.innerWidth - 320);

setImportantStyle(panel, "width", `${width}px`);

For state that is not computed, prefer a class because CSS remains in the stylesheet:

.panel--expanded {
  width: 100% !important;
}

$("#panel").addClass("panel--expanded");

For validation and error handling, ensure that computed values are valid CSS before applying them:

function setPanelWidth(element, pixels) {
  if (!Number.isFinite(pixels) || pixels < 0) {
    return;
  }

  element.style.setProperty("width", `${pixels}px`, "important");
}

When possible, fix the original CSS rule instead of escalating priority. Repeated !important usage makes later overrides harder.

Putting !important in the value

This is rejected because !important is not part of a width value:

// Incorrect
$("#elem").css("width", "100px !important");

Use setProperty() instead:

$("#elem")[0].style.setProperty("width", "100px", "important");

Including ! in the priority argument

The API expects "important", not "!important":

// Incorrect
element.style.setProperty("width", "100px", "!important");

// Correct
element.style.setProperty("width", "100px", "important");

Using camelCase property names with setProperty()

setProperty() expects CSS property names, usually kebab-case:

// Incorrect
element.style.setProperty("backgroundColor", "tomato", "important");

// Correct
element.style.setProperty("background-color", "tomato", "important");

Assuming every jQuery selection contains an element

$("#missing")[0] is undefined, which causes an error when accessing .style:

const element = $("#elem")[0];

if (element) {
  element.style.setProperty("width", "100px", "important");
}

Replacing cssText

Avoid this unless you intentionally want to replace all inline styles:

// Risky: replaces every existing inline declaration
element.style.cssText = "width: 100px !important";

setProperty() changes one property without disturbing the others.

Forgetting other sources of visible styling

If the value still appears unchanged, check for:

• A CSS transition, which can override even important declarations while it runs.
• A different property affecting layout, such as max-width, min-width, or flex/grid sizing.
• A user stylesheet with an important declaration.
• JavaScript code that changes the style again afterward.

setProperty() is the appropriate direct API when the value is computed at runtime and must receive important priority. A class is generally preferable when the possible values are known ahead of time.

// Set a normal inline style
$("#elem").css("width", "100px");

// Set an inline important style
$("#elem")[0].style.setProperty("width", "100px", "important");

// Computed value
const width = 100;
$("#elem")[0].style.setProperty("width", `${width}px`, "important");

// Apply to all jQuery matches
$(".item").each(function () {
  this.style.setProperty("display", "none", "important");
});

// Read the inline value and priority
const element = $("#elem")[0];
element.style.getPropertyValue("width");       // "100px"
element.style.getPropertyPriority("width");    // "important"

// Remove the inline declaration
$("#elem")[0].style.removeProperty("width");

Rules:

• Pass "important" without !.
• Use CSS names such as background-color, not backgroundColor.
• Do not put !important inside the value passed to .css().
• Prefer classes or corrected stylesheet rules when the value does not need runtime calculation.

Why does jQuery .css() not accept !important?

.css() sets a CSS value, while !important is declaration priority rather than part of that value. Browsers reject values such as "100px !important" for width.

How do I set !important with jQuery?

Get the underlying DOM element and call setProperty():

$("#elem")[0].style.setProperty("width", "100px", "important");

Does inline !important override an external stylesheet's !important rule?

Usually yes. Within the same author origin, an inline important declaration outranks an important declaration from an external stylesheet.

Can I use .width() instead of .css()?

No. .width() sets a normal inline width and cannot add important priority.

How do I remove an inline important style?

Remove the property entirely:

element.style.removeProperty("width");

The stylesheet can then control the width again.

Why is my important width still not visibly changing?

Inspect DevTools for a transition, min-width or max-width, flex or grid constraints, a later JavaScript update, or a higher-precedence stylesheet origin.

Should I use !important for normal UI state changes?

Usually not. For normal states, toggling a class is more maintainable. Use setProperty(..., "important") when a runtime-computed override is genuinely necessary.

• CSS cascade — Explains how origin, importance, specificity, and order select a winning declaration.
• CSS specificity — Helps resolve conflicts without immediately using !important.
• Inline styles — Styles placed directly on an element through HTML or JavaScript.
• CSSStyleDeclaration — The DOM API behind element.style, including setProperty() and removeProperty().
• jQuery .css() — Useful for setting and reading ordinary CSS values.
• Class manipulation with jQuery — Use .addClass() and .removeClass() for reusable UI states.
• CSS transitions — Can affect the temporarily displayed value, even when important declarations are involved.