IE6でも子セレクタを使う

|

子セレクタは親要素の直下の子要素のみに適用されるセレクタです。しかし、IE6では子セレクタは 実装されていません。しかし、子孫セレクタをうまく組み合わせることで、擬似的に子セレクタと同様の動作をすることが可能です。

(X)HTMLコード

<div class="section">
   <p>
      直接の子要素なので子セレクタが適用されます。文字色は赤です。
   </p>
   <div>
      <p>
         直接の子要素ではありません。文字色は緑です。
      </p>
   </div>
</div>

CSSコード

div.section p  {
   color:red;
}

div.section * p {
   color:green;
}

まず、子セレクタとして適用したいスタイルを、子孫セレクタで指定します。

さらにこの子孫セレクタを上書きします。子孫セレクタの途中に、特定の要素ではなくアスタリスク (*) を入れると、ワイルドカードの役割を果たします。

つまりこの場合、"クラス「section」を指定されたdiv要素の、任意の子孫要素(*) の、さらに子孫要素である p 要素にスタイルシートを適用する"となります。

要は、親要素の直下以外の孫子要素にスタイルが適用されるということです。

参考サイト

このページに関連する記事

レイアウトに関する記事(29)

参考サイト

お勧めCSS教本

Powered by Movable Type 4.21-ja

最近のブログ記事