According to the theory, the css children combinator element1 > element2:
"it matches only those elements matched by the second selector that are the DIRECT children of elements matched by the first."
However, in the following code example, which is a variation of the code provided in the mozilla reference children combinator it would select the grandchild <p> as well.
The original example it works with <span> element and doesnt select the grandchild p #2.
However,if we replace <span> with <p> (or any other element tag like h1,article,a etc) as in the code below, p#2 grandchild is selected.
Am I missing something?
enter code here
<style>
p {
background-color: green;
}
div > p {
background-color: red;
}
</style>
<div>
<p>p #1, is child of the div.
<p>p #2, is grandchild of the div.</p> <!--why p #2 is selected?-->
</p>
</div>
<p>p #3, is not in the div at all.</p>
