I am using JQuery mobile and I want all of the text to be purple on my application. I did this: color: #7A68AE !important;
in my body
section of my css.
I then tried to debug it in firebug and noticed that my !important
was overridden.
How is this possible? Isn't !important
supposed to overwrite everything else?
Note I have already fixed the problem, I was just really curious about why !important
didn't work
Take a look at the spec on specificity. Though !important
should override, it's possible an in-line style may override this due to the weight it carries.
Without seeing an example I can't be 100% positive, however.
See Also !important rules
!important does over ride anything at the same hierarchy-level -- but a user's style sheet with an !important declaration is like unbeatable.
The full heirarchy is linked style sheet < embeded styles in head < in doc style block (before affected element) < in-line style (depriciated) < in-element style (style="" attr)
This is why they are called Cascading Style Sheets for the record
So a linked style sheet with an !important declaration, as you can see, isn't all THAT !important after all.
Firebug uses on-the-fly user declarations with !important for alot of its tools (such as highlight divs/links/etc.)
Try viewing without Firebug. If that changes it, its firebug transforming it
This might have happened because of many reasons. For example:
!important
clause was overriden by another!important
clause, with more specific selector (Edit: one of other people answering your question, Brad, pointed a resource about it: www.w3.org/TR/CSS2/cascade.html#specificity),You said you have Firebug, so you should be able to determine what is the case. See with JS enabled and disabled, see styles applied for specific selectors and see resulting styles. Without the code there is not much we can say about that.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With