IE6 Juggling #ID.Classes Bug?

IE6 の CSS で、ひとつの HTML エレメントに複数の class を割り当てるとろくなことにならない（ 最後に書いた class セレクタのスタイルしか適用されない）のは知ってたんですが、今日、おわー、こんなのもあったのかーというひどい IE6 仕様にでくわしました。これも有名な話なんでしょうか？

ある ID をつけた HTML エレメントの class 属性を、ユーザアクションに応じて、 jquery の addClass や removeClass でつけかえて見た目を変化させようとしたんです。

css のほうはこんなふうに書いておいてね。

#target-id { /* default style */ }
#target-id.class-a { /* a style */ }
#target-id.class-b { /* b style */ }
#target-id.class-c { /* c style */ }

それでたとえば、jQuery で　$("#target-id").addClass("class-c") ってやれば、c style が適用されて見た目ががらっとかわるってなもんでしょう。

でも IE6 だと、default style のまま。あれ、IE6 って、#ID.CLASS セレクタって使えないんだっけ？って$("#target-id").addClass("class-a
") ってやってみると、これは効くんです。

なんだこりゃってわけで、HTML エレメントの class 属性を直接いじっていろいろ試してみたところ　...

class="a"
-> style a
class="b"
-> style default
class="c"
-> style default
class="a b"
-> style b
class="a b c"
-> style c
class="a c"
-> style default
class="b c"
-> style default

と、まあ、ざっとこんなかんじです。定義の記述順にあたまから並べていけば、一番最後のクラスが適用されるんですよね。いったいどういうメカニズムなんでしょう。

まとめ。

・IE6 で　#ID.CLASS セレクタを使うなら、1Id1Classがおすすめ。

・複数のクラスをつかいたいなら、定義の記述順どおりに、HTML エレメントの Class 属性にクラス名をならべよう！

結局もうね、addClass removeClass でやりくりするのはあきらめて、css(key, value) でスタイル指定のひとつひとつを個別に変更することにしました。

まったくあたまにきますね。ひょっとしたら CSS マスターのみなさんの間では常識の類なのかもしれませんが、ちょっとググってみたかんじでは、ドンピシャの情報が見当たらなかったです。IE の CSS バグまとめサイトとかにあるかな、明日みてみます。