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;
}

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

この記事についての情報

似た内容の記事

この記事に対するトラックバック

トラックバックURL: https://www.lucky-bag.com/mt/mt-tb.cgi/146

Web系雑記 - IEで子供セレクタ (2006年4月27日 21:19)

IEはCSSのセレクタの対応がお粗末です。DIVタグの氾濫の原因だと思います。 たとえば、ある要素を基点として子要素を指定するための「子供セレクタ」 に... 続きを読む

Comments