CSS Child Selector Issue

css, css-selectors, html

Solution

`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.

Problem

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?

Original source

Related problems