Why in the following code world
is blue rather than red?
The specificity of .my_class
is 0,0,1,0
, but it should inherit the color of #my_id
whose specificity is higher at (0,1,0,0
).
#my_id {
color: red;
}
.my_class {
color: blue;
}
<p id='my_id'>
Hello
<span class='my_class'>
world
</span>
</p>
See: w3c: 6 Assigning property values, Cascading, and Inheritance - 6.2 Inheritance
An inherited value takes effect for an element only if no other style declaration has been applied directly to the element.
This style applies to an element with id="my_id"
:
#my_id {
color: red;
}
... and will apply (inherit) to an element nested within having class="my_class"
only if its color
property is otherwise unspecified.
...which no longer is the case once you declare:
.my_class {
color: blue;
}