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:

Answer 1

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/

Answer 2

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