CSS question - Specificity and interitance

Question

Why in the following code world is blue rather than red ?

The specificity of .my_class is 0,0,1,0, but it inherits the color of #my_id which specificity is higher (0,1,0,0).

HTML:

<p id='my_id'>
    Hello
    <span class='my_class'>
        world
    </span>
</p>

CSS:

#my_id {
    color: red;
}

.my_class {
    color: blue;
}

Answer 1

It goes based on specificity and location. The class is applied directly to the text, but the ID is further away.

For a long explanation: http://monc.se/kitchen/38/cascading-order-and-inheritance-in-css

Answer 2

A simpler way to think of it, specificity order applies at the same level, if a style is on a parent more local then it applies, regardless of if an ancestor has a style with higher specificity (since it's further away, or less-local).