Why doesn't my child element inherit color from its parent when parent has more specific selector?

Question

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>

Answer 1

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;
}

Answer 2

The reason this happens is due to inheritance, not specificity.

Look at it this way, if the span didn't have that class, it would inherit the color red from the parent <p> element and "world" would be red. But note that that's due to inheritance.

When you set color for the span, via the class, that overrides the inherited value.

Specificity is for determining which rule to use in multiple competing rules. In your example, there are no competing rules for <span>, so specificity does not come into play. However, if you added this to your styles:

#my_id span {color: orange}

you would see that "world" is orange because of the specificity of the id being more than the class.