why CSS direct child selector applies style to indirect children

Question

I have the following html code:

<div id="test">
<span>
    test 
    <span>test</span>
</span>        
</div>  

And the following CSS code:

#test > span {
color: red;
}

Isn't the above code supposed to select only the direct child span of test div? So only the first 'test' word should be red but the second 'test' word inside the child span should not be selected. Or I'm getting it all wrong??

Answer 1

All else being equal, the default style for the span will be:

span { color: inherit; }

So, while the rule color: red; won't apply to it directly, it will take its color from the parent element's color.

For comparison, see what happens if you explicitly say span { color: blue; }.