CSS セレクタ、グループ化の落とし穴

対象:
（CSS を解する ほぼすべてのブラウザ？）

CSS ソースの比較的ポピュラーな整理法として、セレクタのグループ化というのがあります。CSS セレクタはカンマで区切って並列表記することで、複数のセレクタに対して同時に同一のスタイルを設定することができます。

個別にスタイルを指定

セレクタをグループ化

tr#descendant td div div { background-color: green; } tr#child > td > p { background-color: green; } tr#adjacent th + td + td p { background-color: green; } tr#sibling-comb td span ~ p { background-color: green; } tr#attribute td p[class="valid"] { background-color: green; } tr#starts-with td p[class^="val"] { background-color: green; } tr#ends-with td p[class$="xml"] { background-color: green; } tr#lang td p:lang(zh-cn) { background-color: green; } tr#not td *:not(p) { background-color: green; }

tr#descendant td div div, tr#child > td > p, tr#adjacent th + td + td p, tr#sibling-comb td span ~ p, tr#attribute td p[class="valid"], tr#starts-with td p[class^="val"], tr#ends-with td p[class$="xml"], tr#lang td p:lang(zh-cn), tr#not td *:not(p) { background-color: green; }

プロパティが共通する部分だけをグループ化して、固有部分を切り分けておくだけでも、管理が随分 楽になるので重宝します。すでに活用している方も、きっと多いのではないでしょうか？

ところが この CSS セレクタのグループ化、どうやら思わぬ落とし穴があるようです。グループ化したセレクタ群の中に、ひとつでも閲覧中のブラウザが未対応のセレクタを含むと、グループ化したほかのセレクタまで無効化されてしまって、グループ化したブロックのスタイルが適用されなくなってしまうみたいです。

参考: CSS Selectors Test

• 通常版
  （個別のセレクタごとにスタイルを指定しているもの。）
• カンマ区切りセレクタ版
  （セレクタをグループ化して指定しているもの。）

上掲のテストページは Acid2 のテストのように、ブラウザごとに対応している CSS セレクタをチェックしてくれるんですが、同一のスタイルを適用していても、グループ化を行っているかどうかで表示結果が大きく異なっています。しかもこれが驚くべきことに IE はもとより、Firefox, Opera, Safari で見ても同様の現象が認められる模様。

これは、CSS level 3 や、バージョン6 以前の IE が未対応だった level 2 のセレクタを使う際は要注意ですね。(^o^;)