Put simply, I have a page with these two styles:
* {
color: black;
}
div.error {
color: red
}
And a page structure like:
<html>
...
<div class="error">
<div class="row form">
<div class="column">
Error text.
</div>
</div>
</div>
...
</html>
You would expect "Error text" to be red, wouldn't you. But it is, in fact, rendered black in all browsers. Is this the expected behavior?
My second question, is contingent on whether this is the expected behavior. if it is, then why would a designer ever color every element on his whole website with "black" or some other color if that means it cannot be overridden with inheritance in specific places?
--EDIT--
The question is asked in the context of where you'd want a default color to be placed across the whole website, but wherever you want, you could say "this whole section inherits color #ffeeff". For example, a special form, contained by a divider of class "form." You don't want to label every sub-element of form with a special class like "white-text" to color everything white. You just want to set the "form" class's color and have it propagate to sub-elements.
*is more specific than agent stylesheets (the default stylesheets that come with the browser), and inherited properties are nothing more than something like this:In the agent stylesheet, so your
*withcolor: blackis more specific thanagent:divwithcolor: inherit, thus it wins.