Hi,
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.
A:
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.
Dr8k
2008-10-09 23:53:39
Heh, I have IE6 running in standards compliant mode and it is listening to the !important declaration. Good point on inline style !important.
Graphain
2008-10-10 00:00:25
As Graphain says, IE6 can support !important.
ceejayoz
2008-10-10 00:49:28
I'll correct my post
Dr8k
2008-10-10 04:25:17
+3
A:
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:
- If the cascade results in a value, use it.
- Otherwise, if the property is inherited, use the value of the parent element, generally the computed value.
- 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..
keparo
2008-10-09 23:54:06
Well a dynamically assigned style attribute *is* getting overridden by !important in IE7, IE6 and FF2 at the moment which is why I'm curious (it's desired to be this way, just curious :-) )
Graphain
2008-10-09 23:55:38
Look over the styles, and see how they weigh out according to the standard..
keparo
2008-10-10 00:05:24
I have style="display:none;" versus div#id div { display: block !important; }. The latter wins. http://www.w3.org/TR/CSS2/cascade.html#important-rules may be of some interest.
Graphain
2008-10-10 00:11:03
That's the correct behavior.. the descendant selector plus the !important declaration is most specific.
keparo
2008-10-10 00:51:58
cool, I just wanted to clear up that dynamically assigning a style attribute will often take precedence as per your edit, not always. Thanks for the advice.
Graphain
2008-10-10 03:04:03
+7
A:
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.
Graphain
2008-10-10 00:09:28