Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

!important Overridden

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

like image 672
Soatl Avatar asked May 25 '11 18:05

Soatl


3 Answers

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

like image 161
Brad Christie Avatar answered Sep 29 '22 09:09

Brad Christie


!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

like image 33
colinross Avatar answered Sep 29 '22 10:09

colinross


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.

like image 30
Tadeck Avatar answered Sep 29 '22 09:09

Tadeck