Lucky bag::blog: IE でも擬似的に子供セレクタ

個別記事

前後の記事

ある要素の直接の子要素に対してだけ 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;
}

子孫セレクタで、変えたい色を指定し、その後に元の指定を上書きさせる。これで、擬似的に子供セレクタのような指定が出来るっつうカラクリ。

このリストは、次のエントリーを参照しています: IE でも擬似的に子供セレクタ:

Web系雑記さんからのトラックバック: IEで子供セレクタ; IEはCSSのセレクタの対応がお粗末です。DIVタグの氾濫の原因だと思います。たとえば、ある要素を基点として子要素を指定するための「子供セレクタ」に... [続きを読む]; 2006年04月27日 21:19

"IE でも擬似的に子供セレクタ"へのコメントはまだありません。

コメント内ではタグは一切使えません。コメント内にてタグを表記したい場合は、お手数ですが、文字実体参照を利用して < を < 、> を > とそれぞれ置き換えてください。