2

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.

BoltClock
  • 700,868
  • 160
  • 1,392
  • 1,356
Calicoder
  • 1,322
  • 1
  • 19
  • 37
  • 2
    The `*` rule applies to the element _directly_ and so trumps (excuse the pun) the inheritance. – Boaz Jan 24 '17 at 23:01
  • Yes, that's the expected behavior. See [(why) is the CSS star selector considered harmful?](//stackoverflow.com/q/1714096) – 4castle Jan 24 '17 at 23:01
  • try using `.column { color: red; }` instead and note how it isn't specificity that's causing the * to override the color in your example, it's just that * styles the elements in `.error`, overwriting the inheritance of `div.error` – Michael Coker Jan 24 '17 at 23:04
  • My question is... WHY do you put `color` on `*`? The _default color_ is black, in all browsers (okay, okay, all browsers supporting CSS). If you want to set a specific default color, set it on `body` instead. – junkfoodjunkie Jan 24 '17 at 23:32
  • 2
    "why would a designer ever color every element on his whole website with 'black' or some other color" There is no good reason. No one in their right mind would ever set color or any other inherited property on a * rule. cc @junkfoodjunkie – BoltClock Jan 25 '17 at 03:52
  • Only viable thing to do with `*` is a crude CSS-reset, with `{ margin: 0; padding: 0;} ` – junkfoodjunkie Jan 25 '17 at 05:10
  • @junkfoodjunkie - as BoltClock says, you wouldn't set inherited properties. There are other non-inherited properties one might set. I believe, for example, that `box-sizing:border-box;` is quite common. – Alohci Jan 25 '17 at 10:25
  • The reset setting for * is quite common. One might argue that it's not that smart either, of course. – junkfoodjunkie Jan 25 '17 at 12:20

3 Answers3

4

* is more specific than agent stylesheets (the default stylesheets that come with the browser), and inherited properties are nothing more than something like this:

div {
  /* ... */
  color: inherit;
  /* ... */
}

In the agent stylesheet, so your * with color: black is more specific than agent:div with color: inherit, thus it wins.

Madara's Ghost
  • 172,118
  • 50
  • 264
  • 308
  • 2
    Or, in browsers that implement currentColor, the color declaration probably doesn't even *appear* in their UA stylesheets except for elements that need to override the currentColor initial value. Usually, even when a property is inherited, a UA stylesheet will not even bother specifying it because the initial value is hardcoded into the implementation anyways, and automatically resolved for all elements where cascading doesn't result in a cascaded value. – BoltClock Jan 25 '17 at 03:56
1

It is the expected behavior, for the text to be red, you want to specify:

div.column {
  /* ... */
  color:red;
  /* ... */
}

Do check: (why) is the CSS star selector considered harmful? as suggested by 4castle.

ramayac
  • 5,173
  • 10
  • 50
  • 58
  • That's not an acceptable alternative though. Consider if I wanted my form, which is contained by divider of class "row" to have white text and black background. But the "*" causes all text across my whole page to be black unless the element is specifically given another color. But I don't want to have to label every sub-element of the "row" divider with a class like "white-text". – Calicoder Jan 24 '17 at 23:07
  • @Calicoder - so you write in your stylesheet `.row * { color:inherit }` – Alohci Jan 25 '17 at 01:09
0

just do that instead:

<style>
* { 
    color: black; 
}

div.error {
    color: red
}
</style>
<div>
    <div class="row">
        <div class="column error">
            Error text.
        </div>
    </div>
</div>

enter image description here

ramayac
  • 5,173
  • 10
  • 50
  • 58
Chen Zissu
  • 73
  • 1
  • 10