When does CSS's !important declaration not work?

Question

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.

Answer 1

There are many factors involved in determining which styles override one another. The lower a style declaration appears in the cascade, and the more specific it is in targeting the element, the more it will weigh against other styles.

This is the CSS2 standard for style inheritance:

1. If the cascade results in a value, use it.
2. Otherwise, if the property is inherited, use the value of the parent element, generally the computed value.
3. Otherwise use the property's initial value. The initial value of each property is indicated in the property's definition.

Internally, the browser will calculate the specificity of a rule, according to the standard. The !important declaration will add weight to the rule, but dynamically assigning a style attribute will often take precedence, because it is usually more-highly specified..

Answer 2

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.

Answer 3

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.