Motomichi Works Blog

その日学習したことについて書いている日記です。誰かの役に立ったらそれはそれで嬉しいです。

IE6とIE7のCSSで複数クラスによるスタイル適用するときの不具合について

参考にさせて頂いたページ

IE6で複数クラスを使う時の注意点 | CSS-EBLOG

[CSS]気をつけたいIE 7のバグ -CSS-Discuss | コリス

IE6について

IE6で複数クラスを使う時の注意点 | CSS-EBLOGからソースコードを引用させて頂いております。

以下のようなhtmlとcssがあったとすると

.class1.class3.class2 {  
  background: gray;  
}

<div class="class1 class2 .class3">ほげほげ</div>

cssセレクタの最後に.class2が記述してあるので、IE6では

.class2 {  
  background: gray;  
}

と同様の解釈をするみたい。

OOCSSはIE6に対しても有効な手法とのこと。

IE7について

[CSS]気をつけたいIE 7のバグ -CSS-Discuss | コリスからソースコードを引用させて頂いております。

以下はダメな例です。最後に記述されたクラスが同じ.coverです。

.girl.cover{
 background:green;
}
.boy.cover{
 background:red;
}

以下は良い例です。最後に記述されたクラスが.girlと.boyです。

.cover.girl{
 background:green;
}
.cover.boy{
 background:red;
}

SMACSSなどで、.is-hogeなどのmodifierを使用する場合は記述の順番に気を配る必要がありそうです。

最後に

今の仕事に必要なわけでもないのですが、そういえばと思ったので覚書です。