新しい HTML5 タグと疑似セレクターをいじっていたところ、section:only-child セレクターが機能していないように見えることに気付きました。Chrome の最新バージョン (23.0) でこれをテストしています。
私のコードは次のとおりです。
<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>
CSSは次のとおりです。
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;
}
理論的には、2 番目のセクションには div が 1 つしかないため、「最初の子テスト」というテキストは黄色である必要がありますが、フォントの黄色が得られません。
セレクターを div:only-child に変更すると、問題なく動作します。
ここで jsfiddle を見ることができます: http://jsfiddle.net/KwzZs/3/
これが機能しない理由は何ですか?
ありがとう