IE6で複数のclassを認識できないバグはjQueryで解消

Twitterでのポストがメインになってしまい、ブログの更新が滞ってしまった今日この頃。久しぶりの投稿がてらtipsを少々。同様の症状を検索してみたけど解決法が見つからなかったので、どなたかの参考になれば。

IE6以下でclassの複数指定でバグがあった - Webコーダーの手帳
http://web-coder.info/2009/04/css-bug-ie6-multi-class-selecter.html

class属性の中で、class名を半角スペース区切りで入力してくと複数のclassをその要素へ対して同時に適用できます。
《中略》
　CSS側ではセレクタで、半角スペースも空けずに連続してclass名を並べることで、「複数のclassが同時に適用されている場合」の記述ができます。同様にid名とclass名を並べることで「class名が適用されたid名の場合」とかもできます。
《中略》
どうやらIE6以下ではclassの複数指定は、CSS側のセレクタの記述は対応していないようで、並べられた最後のclass名単品でしか見られていないようです。
《中略》
　とりあえず、結論。
　classの複数適用は問題ないが、CSS側ではセレクタで条件に含めるのは危険。
　まだまだIE6も無視できないシェア持ってますからねー。早く滅びればいいのに。

ここでjQueryですよ奥さん。

.cssファイルにおけるセレクタの不備（というかバグというか）をjQueryで吸収するのである。

たとえば.cssファイルでこんなセレクタを書こうとした場合

#foo div.bar.hoge.fuga {
 ...
}

IE6では解釈できないので、jQueryにて

$('#foo div.bar.hoge.fuga').css(...);

と実装する。わたしの場合、IE6で解釈できない隣接セレクタなどをjQuery側で補強することが多いのだが、同様のことを「class名を連続させたときのセレクタ」というケースでも活用した、というわけだ。

Related posts:

1. 長くなったセレクタの可読性を上げるワザ（jQuery編）
2. Cyproductの『ヌメ革カード＆コインパース』を買ったです