Css child selector is not working

Question

I am digging into the difference between child and descendant selector. Accordingly to the documentation that I found and to this question CSS Child vs Descendant selectors I write this example:

<div>
    <h2>h2 1</h2>
    <h2>h2 2</h2>
    <section>
    section
        <h1>h1 section's son
            <h2>h2 section's nephew</h2>
        </h1>
        <h2>h2 section's son</h2>
    </section>
    <h2>h2 3</h2>
    <h2>h2 4</h2>
</div>

css:

section > h2 {
    color:red;
}

(fiddle here: http://jsfiddle.net/armdan/ksB6f/1/ )

I expected that in this example the "h2 section's nephew" will not be selected, but it is selected and it becomes red. I don't understand what I am missing.

Answer 1

It is probably because it is invalid for h1 to contain a h2 . If you change the h1 to an element that can contain h2 , like a div , it works as you expect:

<div>
    <h2>h2 1</h2>
    <h2>h2 2</h2>
    <section>
    section
        <div>h1 section's son
            <h2>h2 section's nephew</h2>
        </div>
        <h2>h2 section's son</h2>
    </section>
    <h2>h2 3</h2>
    <h2>h2 4</h2>
</div>

http://jsfiddle.net/Z5CeB/

Background: the HTML5 spec for h1 says that it can only contain text and "phrasing elements" , which are:

• a
• em
• strong
• small
• mark
• abbr
• dfn
• i
• b
• s
• u
• code
• var
• samp
• kbd
• sup
• sub
• q
• cite
• span
• bdo
• bdi
• br
• wbr
• ins
• del
• img
• embed
• object
• iframe
• map
• area
• script
• noscript
• ruby
• video
• audio
• input
• textarea
• select
• button
• label
• output
• datalist
• keygen
• progress
• command
• canvas
• time
• meter

Answer 2

There are a few things...

1. <h2> cannot be contained inside <h1> .
2. section > h2 selects the <h2> , that's directly under <section> and not as a grand child element. In the latter case, you need to use section h2 .

Workarounds would be changing your code this way to make it semantic:

<div>
    <h2>h2 1</h2>
    <h2>h2 2</h2>
    <section>
    section
        <h1>h1 section's son</h1>
        <h2>h2 section's nephew</h2>
        <h2>h2 section's son</h2>
    </section>
    <h2>h2 3</h2>
    <h2>h2 4</h2>
</div>