Question

I have two simple css styles:

div
{
color: white;
}    

body
{
color: gray;
}

Each of these has a precedence value of 0,0,0,1. Therefore, according to the rules, the second style should override the first, and all text enclosed in a div should be gray instead of white. This is not what happens; the div style takes precedence no matter its position. Presumably, there’s something somewhere that says that a more specific element takes precedence over a less specific one or some such, but I can’t find anything that says so. Can anyone tell me where this behavior might be documented?

Answer 1

You’re correct that both rules have the same specificity – 0,0,0,1 – however they’re not targeting the div element in the same way.

The body rule (gray text) matches the div, but only through inheritance – the div rule (white text) matches the div directly.

When an element inherits a value from its parent, it is inheriting its computed value, and as declared in the W3C spec every element goes through a four-step calculation.

http://www.w3.org/TR/CSS2/cascade.html#value-stages

The final value of a property is the result of a four-step
calculation: the value is determined through specification (the
“specified value”), then resolved into a value that is used for
inheritance (the “computed value”), then converted into an absolute
value if necessary (the “used value”), and finally transformed
according to the limitations of the local environment (the “actual
value”).

So on the div the color white is the only ‘specified’ value, and so takes precedence. The color gray is only a computed value, via inheritance from the body tag.

At least, that’s how I’ve interpreted the spec.