CODEWITHSUNDEEP
htmlcsscss-selectors
Daniele Armanasco
Daniele Armanasco

Reputation: 7451

Css child selector is not working

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.

Upvotes: 0

Views: 167

Answers (2)

Praveen Kumar Purushothaman
Praveen Kumar Purushothaman

Reputation: 167250

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>

Upvotes: 2

joews
joews

Reputation: 30340

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

Upvotes: 3

Related Questions