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名を連続させたときのセレクタ」というケースでも活用した、というわけだ。
