Why Is * Given More Specificity Than Property Inheritance In CSS?

Put simply, I have a page with these two styles: * { color: black; } div.error { color: red } And a page structure like: ...

Solution 1:

* 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.

Solution 2:

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.

Solution 3:

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>

Share