CSS important Not Working - and Fixes

When styling elements with CSS, sometimes we can get frustrated that the styling is not applied and using the !important rule can force a CSS snippet to work. We can use this to force a CSS style. It sometimes work as a quick fix but not always.

This post will go through reasons why using the !important CSS keyword might not be working for you and their fixes.

The common reasons why !important is not working comes down to:

1. You are using the wrong CSS selector and not targeting the correct element,
2. You are using in animation @keyframes
3. Using !important multiple times and having conflicts

What is the !important keyword?

The !important rule have been around since CSS1 specification in 1991 and allows the user to overrride browser specificity - this just means how a browser will decide which style to apply to each element.

The following diagram shows how browser will render HTML and display it to the user

Consider the following CSS style where we want to make all fonts in the <blockquote> to be italic:

blockquote * {
    font-style: italic;
}

Now if somehow the above is not working, we can use the !important rule like so:

blockquote * {
    font-style: italic !important; /* Adding important to increase specifity */
}

CSS Specifity - which style gets applied!

CSS specifity just refers to which style the browser will apply to each element. There are quirks amongs browsers but most modern browsers like Chrome, Edge, Safari, etc generally follow the same rules.

Browsers will use the following order when deciding to apply a style to a specific element - lower down the list gets the highest precedence:

• Browser Styles - each browser (chrome, safari, etc) comes with their own stylesheets. These default styles applied by your browser with the least precedence.
• User Styles - Custom styles created by the brower’s user.
• Author Styles - Styles created by the author/ creator of the website or page.
• !important Author Styles - author styles declared with important keyword.
• !important User Styles - user styles declared with important keyword.
• Inline Styles - inline styles will be given highest precedence and overwrite any styles previously.

Within each of the CSS stylesheets, it then follows the below order - lower down the list is given the most specifity:

• * - wildcard selector
• Type Selectors e.g <p> and Pseudo Elements e.g ::after
• Class Selectors e.g. .container , Attributes Selectors e.g. [target=”_blank”] and Pseudo Classes e.g. :hover.
• ID Selectors e.g. #app
• Inline styles
• !important - this will override any other previous styles

Fix 1 - !important not targetting correct element

The most common reason why using !important CSS rule is not working to style your element is that it is not targetting the correct element.

As an example, consider the following HTML and CSS

<div class="ui-tabs">
    <ul>
        <li class="ui-active">
            <a href="#">Text</a>
        </li>
    </ul>
</div>

.ui-tabs .ui-active {
    background: #084;
    color: blue !important;
}

a:link {
    color: red;
}

Now we can see that that text link <a> is not blue - even though we applied the !important rule to it. The reason this is failing is because we applied the rule to the wrong element. From the above, we have applied the color blue the list item elements and not link elements.

If we change the CSS to the following:

.ui-tabs .ui-active a:link {
    background: #084;
    color: blue !important;
}

a:link {
    color: red;
}

This will target the link <a> inside the list item <li> element

Fix 2 - !important used in @keyframes

One reason that the !important rule would not work is it only works on cascade properties. The cascade is how browers determine styles from different sources are combined to be applied for a specific element.

At rules such as the @keyframes do not participate in the cascade and therefore using !important will not work!

As example, consider the following HTML

<div id="mydiv" style="margin-left: 5px"></div>

We then want to animate this <div> using @keyframes as follows:

#mydiv {
    width: 100px;
    height: 100px;
    animation: animateLeft 4s infinite ease-in 1s
}

@keyframes animateLeft {
    0% {
        margin-left: 100px!important
    }
    100% {
        margin-left: 500px
    }
}

The above margin-left: 100px!important will not work, because @keyframes does not interact with the cascade and therefore the margin-left style of the <div> will not be overwritten by the value inside the 0%.

It will stay the same style as the inline style margin-left: 5px. If we remove the !important, then the margin-left: 100px; will be enforced!

#mydiv {
    width: 100px;
    height: 100px;
    animation: animateLeft 4s infinite ease-in 1s
}

@keyframes animateLeft {
    0% {
        margin-left: 100px;
    }
    100% {
        margin-left: 500px
    }
}

💡 Tip - dont use !important in @keyframes!

More information located here: https://www.w3.org/TR/css-animations-1/#keyframes

Fix 3 - !important used multiple times

The !important rule can be used to override an element’s styles, but it could be used to be overritten by itself. This can happen when you have multiple !important rules with the same selectors. Consider the following CSS style:

img { border: none !important; }
#article img { border: 2px solid #fff !important; } /* This will be applied*/

The bottom rule that specifies a border around the image will be applied because it has a higher specifity than the more generic top rule!

💡 Tip - matching selectors that are declared lower in the CSS document will take precedence

One thing to keep in mind is that when you have multiple selectors that select the same element, the selector that is at the bottom of the CSS document will be applied! So for example, lets say we have the following paragraphs and their styles:

<div>
    <p>First paragraph</p>
</div>
<p>First paragraph</p>

p { color: red; }
p { color: blue; }

In the above, all <p> paragraph elements will have text of blue color! Even though we have two matching selectors, CSS style that is lower in the document will take precedence! To get around this and make the first paragraph color red, we can bump up the specifity declaring the following:

div p { color: red; }
p { color: blue; }

When should you use !important

Best practice is to avoid using !important and use specifity rules instead. This will make your CSS much cleaner and easier to manage. For example, too many important rules will make you loose track of which one is more important than the other (given the same selector).

However, the important rule can be handy and useful in some use cases:

• Used with user styles to apply the user custom CSS they want to apply for a webpage. This is because we have no control over the CSS that has been loaded.
• Dynamic styles set by JavaScript - to override styles applied by JS on the fly

Browser support

!important has been part of the CSS spec ever since CSS1 in 1991 and browser support for this is good for most modern browsers (chrome, safari, firefox, etc) and even older browsers such as IE (Internet explorer)

Summary

In this post I went over how CSS !important is not working - this can be a quick fix, but not recommended approach!

A checklist of how to troubleshoot why !important is not working is:

1. Check that the !important property is applied correctly to the target element.
2. Determine if the !important is used in at-rules such as @keyframes. This will not work because @keyframes will ignore the cascade
3. Check that important is not used multiple times with your CSS - for example a higher specifity CSS declaration with !important applied will override anything that is less specific