CODEWITHSUNDEEP
css
Don P
Don P

Reputation: 63667

CSS !important does not override styles from external stylesheets

In a stylesheet, I have this:

body {
  color: white !important;
}

Notice how it doesn't work on the text on the right side of this page:

https://www.graf.ly/graph_templates/56/

You can inspect the text, and see that the style was applied, but then overridden. How is this possible?

I thought !important ignores CSS specificity, and acts as a directive to always use that style. I've never seen this behavior before.

Note:

Don't be fooled by the white text by the graph's axis, that is a text svg element and was colored with fill: white !important.

Also, I'm well aware of the correct usage of !important. So please no comments or answers saying "you should never use !important". That is not the question :)

Upvotes: 18

Views: 29344

Answers (2)

user3466437
user3466437

Reputation: 391

This has nothing to do with CSS specificity or !important. You have a rule in main.css that says:

#legend .label {
  color: black;
}

The selector is targeting the .label elements directly and giving them a color, which prevents them from inheriting the color from the body or some other ancestor. An !important property applies only to the element that is targeted; it does not force other elements to inherit that property. In other words, a specified rule always takes precedence over an inherited rule, even if that inherited rule is !important.

See the spec:

User agents must first assign a specified value to each property based on the following mechanisms (in order of precedence):

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

— http://www.w3.org/TR/CSS21/cascade.html#specified-value

Upvotes: 32

mifi79
mifi79

Reputation: 1106

You have a more specific rule that is taking precedence on line 94 in main.css:

#legend .label {
    color: black;
}

Change that to white and you are good to go.

Regarding the important, it will take precedence over other references to body, but not to #legend label which is a more specific and applicable selector. Here is a decent article on specificity in CSS: http://css-tricks.com/specifics-on-css-specificity/

Upvotes: 4

Related Questions