ある要素の直接の子要素に対してだけ CSS で指定をしたい場合、子供セレクタ div > p が便利。しかし、IE がこれに対応していなくて残念って感じだったんだけど、meyer 氏が IE でも擬似的に直接の子要素を指定できる方法を発見した模様。
例えば、下記の (X)HTML があったとして、id="content" の子要素の段落だけ背景色を #ff8800 に変えたいって場合。
<div id="content">
<p>content の直接子供要素の段落。ここだけ背景色を変えたい。</p>
<div id="foo">
<p>この段落は色は変えたくない。</p>
<p>この段落は色は変えたくない。</p>
</div>
</div>
子供セレクタに対応しているブラウザであれば、下記の CSS で実現することが出来るけど、IE には反映されない。
#content > p {
background: #ff8800;
}そこで、IE でも擬似的に子要素への指定を実現するには、下記のように指定すればオッケーなのですよ。
#content p {
background: #ff8800;
}
#content * p {
background: transparent;
}子孫セレクタで、変えたい色を指定し、その後に元の指定を上書きさせる。これで、擬似的に子供セレクタのような指定が出来るっつうカラクリ。
Comments