属性セレクタハックは有効か？

CSSのセレクタの一つに属性セレクタという物がある。

/* case 1 */
#container[class]{
   margin:10px;
}

/* case 2 */
#container[class="subPage"]{
   margin:50px;

/* case 3 */
#container{ //IE用
   margin:30px;
}
#container[id]{ //firefox,opera,safari用
   margin:50px;
}

case 1ではid属性「container」が指定された要素に何かしらのclass属性が指定されている要素のみ対してプロパティを指定している。case 2ではcase 1の条件に加えてclass属性に「subpage」が指定されている要素のみに対してプロパティを指定している。

属性セレクタはIE6やIE5には対応していないので、当サイトではそれを利用してIE6とIE5には異なる属性を指定（CSSハック）している。手順は先にIE向けにスタイルを定義して、その後属性セレクタを使用してスタイルを上書きし、IE以外のブラウザにスタイルを適用させる。（case 3）

しかしこのCSSハックは文法的には正しいのに世間一般では使われていない。何故かと思い調べてみたら、どうやらmacIEも属性セレクタには対応してないのが原因っぽい。どういうことかと言うと、macIEが属性セレクタに対応していないということは、winIE用のCSSハックがmacIEに適用されてしまうということ。macIEとwinIEが同じバグを抱えている保証は無いため支障が出てしまう。

というわけで、当サイトはmacIEでの表示は保証できません。あしからず。ちなみに、winIE用のCSSハックはIE7の表示に多大な影響を与える可能性があるので（自分の旧サイトがそうでした）、今後は控える、もしくはIE７で表示確認したほうが良いかと思います。

--追記--
CSSハック対象をwinIE5,6のみにしたい場合は子セレクタハックや隣接セレクタハックが有効な模様（これらはmacIEには対応している為）。

/* case 4 子セレクタ */
#container > ul{
   margin:10px;
}

/* case 5 隣接セレクタ */
h2 + p{
   margin:5px;
}

case 4はID属性「container」の子であるul要素のみに適用されるスタイルです。あくまでも子だけに有効で子孫には適用されません。case 5 はh2要素と隣合うp要素のみに適用されます。

当サイトではCSS講座も行っていますので是非ご覧下さい。