CSS Child Selector Issue

Question

Can anyone tell me how the "Heading" and "Heading 2" are being coloured red in the following example? http://jsfiddle.net/zxfNU/1/

HTML

<div id="root">
    <p>
        <p>Test 1</p>

        <h3>Heading</h3>

        <h3>Heading 2</h3>

    </p>
</div>

<h3>Heading 3</h3>

CSS

div#root > h3
{
    color: red;
}

Isn't the CSS only selecting a h3 element if it's under the div, when in fact it's under the p element?

Answer 1

p inside p is not valid markup. So the result html is:

<div id="root">
    <p></p>
    <p>Test 1</p>
    <h3>Heading</h3>       
    <h3>Heading 2</h3>
    <p></p>
</div>

As you can see browser fixes the wrong markup to follow the specification.