CSS !important does not override styles from external stylesheets

Question

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 :)

Answer 1

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