【特集】CSS実装徹底検証! そこが知りたいInternet Explorer 7 (3) 02-02 IE6で未対応だったセレクタの対応(1) | クリエイティブ

急上昇ワード

[

]

【特集】

CSS実装徹底検証! そこが知りたいInternet Explorer 7

3 02-02 IE6で未対応だったセレクタの対応(1)

エ・ビスコム・テック・ラボ　 [2006/07/13]

印刷

先頭
前へ
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- ／24
次へ
最後

対応したセレクタ、対応してないセレクタ

CSSのセレクタは、スタイルシートの適用先を指定するためのものだ。IE6では、CSS1.0のセレクタには対応していたものの、CSS2.0で追加されたセレクタにはほとんど対応していなかった。

IE7 beta2では一部のセレクタを除いて、基本的なセレクタには対応している。新しく対応したセレクタは以下の通りだ。

A > B
A + B
A:first-child
A[属性名]
A[属性名="属性値"]
A[属性名|="属性値"]
A[属性名~="属性値"]

なお、対応していないセレクタは以下のようになっている。

A:lang
A:focus
A:before
A:after

A > B

Aの1階層下の子要素Bを指定するセレクタ。たとえば、サンプルソース2-2-1のように「body > p」と指定すると、<body>の１階層下にある<p>だけに設定が適用され、「文章Ａ」と「文章Ｃ」の文字が赤色で表示される。<div>内にある<p>は、<body>から見ると2階層下となるため、「文章Ｂ」の文字の色は変化しない。なお、IE6は未対応のため、スタイルシートの設定は適用されず、文字の色は変わらない。


図2-2-1a:IE6での表示	図2-2-1b:IE7 beta2での表示

サンプルソース2-2-1

body > p {color:red}

<body> <h1>見出し</h1> <p>文章Ａ文章Ａ文章Ａ文章Ａ文章Ａ文章Ａ文章Ａ文章Ａ文章Ａ文章Ａ文章Ａ文章Ａ文章Ａ文章Ａ文章Ａ文章Ａ文章Ａ文章Ａ文章Ａ文章Ａ文章Ａ文章Ａ文章Ａ文章Ａ文章Ａ文章Ａ</p> <div> <p>文章Ｂ文章Ｂ文章Ｂ文章Ｂ文章Ｂ文章Ｂ文章Ｂ文章Ｂ文章Ｂ文章Ｂ文章Ｂ文章Ｂ文章Ｂ文章Ｂ文章Ｂ文章Ｂ文章Ｂ文章Ｂ文章Ｂ文章Ｂ文章Ｂ文章Ｂ文章Ｂ文章Ｂ文章Ｂ文章Ｂ</p> </div> <p>文章Ｃ文章Ｃ文章Ｃ文章Ｃ文章Ｃ文章Ｃ文章Ｃ文章Ｃ文章Ｃ文章Ｃ文章Ｃ文章Ｃ文章Ｃ文章Ｃ文章Ｃ文章Ｃ文章Ｃ文章Ｃ文章Ｃ文章Ｃ文章Ｃ文章Ｃ文章Ｃ文章Ｃ文章Ｃ文章Ｃ</p> </body>

A + B

Aに隣接するBを指定するセレクタ。サンプルソース2-2-2のように「h1 + p」と指定すると、<h1>の直後に記述した<p>に対して設定が適用され、「文章Ａ」の文字が赤色で表示される。「文章Ｂ」の部分は<h1>と隣接していないため、文字の色は変わらない。なお、IE6は未対応のため、スタイルシートの設定は適用されず、文字の色は変わらない。


図2-2-2a:IE6での表示	図2-2-2b:IE7 beta2での表示

サンプルソース2-2-2

h1 + p {color:red}

<body> <h1>見出し</h1> <p>文章Ａ文章Ａ文章Ａ文章Ａ文章Ａ文章Ａ文章Ａ文章Ａ文章Ａ文章Ａ文章Ａ文章Ａ文章Ａ文章Ａ文章Ａ文章Ａ文章Ａ文章Ａ文章Ａ文章Ａ文章Ａ文章Ａ文章Ａ文章Ａ文章Ａ文章Ａ</p> <p>文章Ｂ文章Ｂ文章Ｂ文章Ｂ文章Ｂ文章Ｂ文章Ｂ文章Ｂ文章Ｂ文章Ｂ文章Ｂ文章Ｂ文章Ｂ文章Ｂ文章Ｂ文章Ｂ文章Ｂ文章Ｂ文章Ｂ文章Ｂ文章Ｂ文章Ｂ文章Ｂ文章Ｂ文章Ｂ文章Ｂ</p> </body>

A:first-child

他の要素内にある最初の子要素Aに対して設定を適用するセレクタ。サンプルソース2-2-3のように「p:first-child」と指定すると、他の要素内にある最初の<p>に対して設定が適用され、「文章Ａ」と「文章Ｃ」の文字が赤色で表示される。なお、IE6は未対応のため、スタイルシートの設定は適用されず、文字の色は変わらない。


図2-2-3a:IE6での表示	図2-2-3b:IE7 beta2での表示

サンプルソース2-2-3

p:first-child {color:red}

<body> <h1>見出し</h1> <div> <p>文章Ａ文章Ａ文章Ａ文章Ａ文章Ａ文章Ａ文章Ａ文章Ａ文章Ａ文章Ａ文章Ａ文章Ａ文章Ａ文章Ａ文章Ａ文章Ａ文章Ａ文章Ａ文章Ａ文章Ａ文章Ａ文章Ａ文章Ａ文章Ａ文章Ａ文章Ａ</p> <p>文章Ｂ文章Ｂ文章Ｂ文章Ｂ文章Ｂ文章Ｂ文章Ｂ文章Ｂ文章Ｂ文章Ｂ文章Ｂ文章Ｂ文章Ｂ文章Ｂ文章Ｂ文章Ｂ文章Ｂ文章Ｂ文章Ｂ文章Ｂ文章Ｂ文章Ｂ文章Ｂ文章Ｂ文章Ｂ文章Ｂ</p> </div> <div> <p>文章Ｃ文章Ｃ文章Ｃ文章Ｃ文章Ｃ文章Ｃ文章Ｃ文章Ｃ文章Ｃ文章Ｃ文章Ｃ文章Ｃ文章Ｃ文章Ｃ文章Ｃ文章Ｃ文章Ｃ文章Ｃ文章Ｃ文章Ｃ文章Ｃ文章Ｃ文章Ｃ文章Ｃ文章Ｃ文章Ｃ</p> <p>文章Ｄ文章Ｄ文章Ｄ文章Ｄ文章Ｄ文章Ｄ文章Ｄ文章Ｄ文章Ｄ文章Ｄ文章Ｄ文章Ｄ文章Ｄ文章Ｄ文章Ｄ文章Ｄ文章Ｄ文章Ｄ文章Ｄ文章Ｄ文章Ｄ文章Ｄ文章Ｄ文章Ｄ文章Ｄ文章Ｄ</p> </div> </body>