Skip to main content

How to Override an Element's !important Styles in JavaScript

CSS styles with the !important rule are designed to have the highest priority, overriding all other style declarations. However, there are rare situations, often in JavaScript-driven applications or browser extensions, where you might need to programmatically override even these !important styles.

This guide will teach you the specific and only reliable method for doing this using element.style.setProperty(). We will also discuss the importance of CSS specificity and why overriding !important should be considered a last resort.

The Core Problem: The !important Rule​

The !important rule is an exception to the normal rules of CSS specificity. When it is added to a style declaration, that declaration takes precedence over any other conflicting styles for that property on that element, regardless of selector specificity or source order.

For example, imagine you have an element that is hidden by a very specific CSS rule using !important. HTML:

<div id="box" style="width: 150px; height: 150px;">
  Hello world
</div>

CSS:

#box {
  display: none !important;
}

You now need to make this box visible using JavaScript.

The Solution: element.style.setProperty()​

The standard way of setting a style in JavaScript (element.style.property) cannot override an !important style. The only way to do this is with the setProperty() method on the element's style object, which allows you to specify a priority.

const box = document.getElementById('box');

// To override an !important style, you must also set the priority to 'important'.
box.style.setProperty('display', 'block', 'important');

After this code runs, the div will become visible because the inline style set by JavaScript now also has !important priority, and an inline style has higher specificity than a stylesheet rule.

How setProperty() Works​

The element.style.setProperty() method is a more powerful way to set a CSS property on an element's inline styles.

element.style.setProperty(propertyName, value, priority)

where:

  • propertyName: The name of the CSS property, written in kebab-case (e.g., 'background-color').
  • value: The new value for the property (e.g., 'lime').
  • priority (optional): A string that can be set to "important" to add the !important rule to the style.

When you run box.style.setProperty('display', 'block', 'important');, it effectively sets the element's style attribute to style="display: block !important;", which is strong enough to override the stylesheet rule.

Why A Normal Style Assignment Fails​

A standard JavaScript style assignment does not include the !important flag, so it loses the specificity battle.

Example of problems with incorrect code: the inline style display: block has a lower priority than the stylesheet rule display: none !important;, so the element remains hidden.

const box = document.getElementById('box');

// ⛔️ This will NOT work. The !important rule in the CSS is stronger.
box.style.display = 'block';

A Word of Caution: Why You Should Avoid Overriding !important​

The !important rule is often a sign of a "specificity war" in your CSS and can make your styles hard to debug and maintain. Programmatically overriding it with JavaScript should be a last resort.

Before using setProperty(..., 'important'), consider these alternatives:

  • Refactor Your CSS: The best solution is to fix the underlying CSS. Remove the !important rule and use proper selector specificity to control your styles.
  • Add a Class: Instead of directly manipulating styles, add a new class with a more specific selector that can override the original rule without needing !important. 
    /* More specific selector */
    body #box.is-visible {
      display: block !important;
    }
    box.classList.add('is-visible');

Practical Example: A "Force Visible" Bookmarklet​

A legitimate use case for overriding !important is in a browser extension or bookmarklet that needs to force changes on a third-party website, where you cannot control the original CSS.

This script finds all elements with display: none !important and makes them visible.

// This is an example of code you might use in a bookmarklet.
// It's a "brute force" approach not recommended for your own websites.

const allElements = document.querySelectorAll('*');

allElements.forEach(element => {
  const styles = window.getComputedStyle(element);
  
  if (styles.display === 'none') {
    // Check if the 'display' rule has !important priority
    const priority = element.style.getPropertyPriority('display');
    if (priority === 'important') {
      console.log('Forcing element to be visible:', element);
      element.style.setProperty('display', 'block', 'important');
    }
  }
});
warning

It's a "brute force" approach not recommended for your own websites!

Conclusion​

While !important styles should be used sparingly, JavaScript provides a specific tool to override them when absolutely necessary.

  • To override an !important CSS rule, you must use the element.style.setProperty(property, value, 'important') method.
  • A standard style assignment like element.style.property = value cannot override an !important rule.
  • Overriding !important with JavaScript should be a last resort. The best long-term solution is to refactor your CSS to use proper selector specificity instead of relying on !important.

Table of Contents