GR7 GR7 - 1 month ago 7
CSS Question

Why does CSS section:only-child selector not work?

I was just messing around with the new HTML5 tags and pseudo selectors and noticed that the section:only-child selector appears not to work. I'm testing this on the latest version of Chrome (23.0).

My code is:

<section id="s1">
<div id="div1">abc</div>
<div id="div2">
<span>first span</span>
<span class="sp">second span</span>
</div>
</section>

<section>
<div>first child test</div>
</section>​


and the CSS is:

section {
background-color: brown;
width: 400px;
height: 200px;
}

#s1 {
position: relative;
background-color: rgba(0,255,0,0.5);
border: 1px solid #000; width: 50%;
}

#div1 {
background-color: #0f0;
position: relative;
}

#div2 {
background-color: #0ff;
width: 200px;
color: red;
}

#div2 .sp {
color: white;
text-decoration:line-through;
}

section:only-child {
color: yellow;

}​


In theory, the text "first child test" should be yellow, because there is only one div on the second section, but it is not getting the yellow color for a font.

If I change the selector to div:only-child it'll work just fine.

You can see the jsfiddle here: http://jsfiddle.net/KwzZs/3/

any reason why this is not working?

thanks

Answer

This rule:

section:only-child

Matches a section element which is an only-child.

This rule (note the space):

section :only-child

Matches an element which is an only-child of a section. Is this what you expected?