!important Overridden

Question

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

Answer 1

!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

Answer 2

This might have happened because of many reasons. For example:

• one your !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 have used some inline styles for specific element,
• you used JavaScript to actually add some inline styles into the element,

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.

Answer 3

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