IE6以下でclassの複数指定でバグがあった

　要素に対して、半角スペース区切りでclass名を並べると、その要素に対して複数のclassを適用できますが、CSS側のセレクタで複数のclassを条件にした場合にIE6以下が非対応（＋バグ）でなんかおかしくなりました。忘れないようにメモメモ。

　まずは初めに複数のclass指定をする場合のサンプルをば。

HTML

<div class="test sample1 hoge">
	なかみ
</div>

　HTMLはこんな感じで、class属性の中で、class名を半角スペース区切りで入力してくと複数のclassをその要素へ対して同時に適用できます。
　で、次はCSS側の記述例。

CSS

.test {
	/*.testが適用されている要素へ適用*/
	color:#f00;
}
.sample1 {
	/*.sampleが適用されている要素へ適用*/
	font-weight:bold;
}
.test.sample1 {
	/*.testと.sampleが両方適用されている要素へ適用*/
	border:4px solid #f00;
}
.test.sample2.hoge {
	/*.testと.sample2と.hogeが3つとも適用されている要素へ適用*/
	background:#fcc;
}

　CSS側ではセレクタで、半角スペースも空けずに連続してclass名を並べることで、「複数のclassが同時に適用されている場合」の記述ができます。同様にid名とclass名を並べることで「class名が適用されたid名の場合」とかもできます。

　で、上記のサンプルソースのような場合、divタグに適用されているのは.test、.sample1、.hogeの3つなので、本来であれば「テキストが赤字（.test）」かつ「太字（.sample1）になって」「4pxの赤い線（.test.sample1）が出る」という状況になるはずなんですが、IE6以下の場合、なぜか最後の.test.sample2.hogeという適用されていないはずのclass（.sample2）までもが適用されていることになってて、背景色の薄い赤色まで適用されてまいました。
　どうにもおかしい。
　なのでclass名の順番を入れ替えたりなど調べてみましたところ、どうやらIE6以下ではclassの複数指定は、CSS側のセレクタの記述は対応していないようで、並べられた最後のclass名単品でしか見られていないようです。

例

.test.sample1.hoge {〜〜}

↑こういう記述があると、IE6以下にとっては↓と同じ扱いになる。

.hoge {〜〜}

　とりあえず、結論。
　classの複数適用は問題ないが、CSS側ではセレクタで条件に含めるのは危険。
　まだまだIE6も無視できないシェア持ってますからねー。早く滅びればいいのに。