for 属性に対する属性セレクタの IE7 での挙動

IE7 には、label 要素の for 属性に対する CSS の属性セレクタが無効になるバグがあります。

label[for="foo"] {
    background-color: yellow;
}

この場合 for="foo" という属性を持つ label 要素の背景が黄色になるはずですが、IE7 では無視されてしまいます。これはどうやら for というキーワードが DOM の予約語であることに由来するバグのようです (参考: Attribute Selector (CSS selector) - SitePoint CSS Reference)。そのかわり、IE7 では htmlFor という属性名を利用すればスタイルが有効になります。

label[htmlFor="foo"] {
    background-color: yellow;
}

ただこれだと IE8 以降やほかのブラウザが解釈してくれないので、htmlFor と for によるセレクタを並べます。

label[htmlFor="foo"],
label[for="foo"] {
    background-color: yellow;
}

これで属性セレクタを解釈するすべてのブラウザでスタイルが有効になります。

• Demo: [for] attribute selectors in IE7