'When does CSS's !important declaration not work?

I am wondering if someone can put a bit of an authoritative reference summary of when the !important declaration in CSS does not work to override inline styles.

css


Solution 1:[1]

Well so far research seems to suggest:

  • IE7 supports !important.
  • FireFox 2 and 3 support !important.
  • IE6 supports !important in standards compliant mode.

However, IE6 (possible IE7) does not support !important in this case:

someselector {
  property: value !important;
  same-property: another-value;
}

It will use the second value (the last listed).

This is confirmed by this page:

In Internet Explorer 6 and earlier, if an important declaration appears before a normal declaration for the same property within the same declaration block, the normal declaration will overwrite the important declaration.

Internet Explorer 6 and 7 give importance to a declaration when an illegal identifier is used in place of the keyword important, instead of ignoring the declaration as they should.

Gizmo's comment states that Safari and Opera support !important.

Solution 2:[2]

I'm pretty sure not all browsers recognise the !important declaration. But can't remember which ones do off the top of my head. Will check and get back to you.

[EDIT] I can confirm IE6 and earlier do not recognise !important (unless the browser is in standards compliance mode - not the default).

You can use !important to override an inline rule. But also remember that inline rules can be tagged !important as well.

Solution 3:[3]

No answer has mentioned that !important will invalidate any properties that do not interact with the cascade (see the W3C documentation). For example, consider the following HTML:

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

which is styled by the following CSS:

#bad-div {
    width: 100px;
    height: 100px;
    animation: marginLeftInvalid 4s infinite ease-in 1s
}

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

Since @keyframes rules does not interact with the cascade, the margin-left style of the <div> will not be overwritten by the value inside the 0% <keyframe-selector>.

However, when the HTML and CSS are updated to this:

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

#good-div {
    width: 100px;
    height: 100px;
    animation: marginLeftValid 4s infinite ease-in 1s
}

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

the margin-left at 0% is enforced, and the animation will continue to cycle with a starting margin-left of 100px.

You can see a demonstration within this JSFiddle.

Other at-rules which do not cascade (and therefore !important will invalidates properties properties within these declarations) include:

  1. @font-face
  2. @viewport
  3. @counter-style
  4. @property
  5. @page
  6. @color-profile
  7. @scroll-timeline

A demonstration of @font-face and its lack of participation in the the cascade can be seen using this CodePen. Make these CSS updates:

  1. Add the attribute style="font-family: moderna" for the first h1 tag in the DOM; delete this same rule from the h1 within the CSS.
  2. Add !important after the first 'moderna' you see in the CSS (font-family descriptor within the first @font-face) - the font rendering of the heading will break.
  3. Reload the page and repeat #2 for the 2nd src descriptor (add after format()) ... font rendering for the h1 breaks.
  4. Revert this, and then to the first h1 {...} declaration in the CSS, add the style ---> font-family: 'arsenalregular' ... you'll notice 'moderna' is NOT overwritten.
  5. Revert this, and then add !important after the first 'arsenalregular' you see (font-family descriptor within the second @font-face) - the font rendering of the heading will not change.
  6. reload the page and find 'moderna' within the first h1 declaration - add !important after 'moderna' - the font rendering of the h1 DOES render as arsenalregular because - in the CSS - this h1 {...} declaration is part of the cascade.

A demonstration of the non-participation of @counter-style in the CSS cascade can be seen (in Firefox) on this JSFiddle. Notice that the list glyph rendering breaks when !important is appended to the declaration value of the symbols descriptor, whereas the list glyph suffix rendering breaks when !important is appended to the suffix descriptor.

NOTE: other at-rules DO cascade. Here is a JSFiddle which shows !important being applied within @supports and @layer. As of February 2022, due to lack of support for @layer (0.02%) please use Firefox 97 or greater for this JSFiddle.

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1
Solution 2
Solution 3

Related Questions