IE6対策に必要な知識を整理するために、class、idの複数指定に関する実験をしてみました。
文字色、背景色、罫線色が、赤、緑、青となるように
.color_red {
color:#f00;
}
.color_green {
color:#090;
}
.color_blue {
color:#00f;
}
.bg_red {
background:#f99;
}
.bg_green {
background:#9f9;
}
.bg_blue {
background:#99f;
}
.border_red {
border:5px #f00 solid;
}
.border_green {
border:5px #0f0 solid;
}
.border_blue {
border:5px #00f solid;
}
#color_red {
color:#f00;
}
#color_green {
color:#090;
}
#color_blue {
color:#00f;
}
#bg_red {
background:#f99;
}
#bg_green {
background:#9f9;
}
#bg_blue {
background:#99f;
}
#border_red {
border:5px #f00 solid;
}
#border_green {
border:5px #0f0 solid;
}
#border_blue {
border:5px #00f solid;
}
として、
htmlに複数classを指定
してみると、
赤文字 青背景 青罫線
青文字 赤背景 赤罫線
結果↓
赤文字 青背景 青罫線
青文字 赤背景 赤罫線
htmlに複数idを指定
すると
idは1つだけなら指定できるけど
2つ以上は指定できない
結果↓
idは1つだけなら指定できるけど
2つ以上は指定できない
となることから、
- 1つの要素に複数classを指定したい場合は、class名を半角スペースで区切る
- 1つの要素に複数idを指定することはできない
ということが分かります。これはIE6, IE7, IE8, Firefox, Opera, Google Chrome, Safariで正しく見えました。…………（＊）
で、これはhtml側での複数指定ですが、次に
css側での複数指定
について見るために、
.color_red.bg_blue.border_green {
font-size:80px;
}
とすると、
.color_red.bg_blue.border_greenに80px
とした場合に限って、
.color_red.bg_blue.border_greenに80px
となることから、これはclassが「color_red」かつ「bg_red」かつ「border_green」の場合、font-sizeに80pxを与える指定ということが分かります。
以下、いろいろな組み合わせを試そうとすると前に書いた記述に影響するのでやらずに結論だけ書きますが、ぱっと見似ている
.color_red,.bg_blue,.border_green {
font-size:80px;
}
はclassが「color_red」と「bg_red」と「border_green」のものは、font-sizeに80pxを与えるという記述なので、こう（↓）まとめると分かりやすいと思います。
- cssにピリオド（.）+class名を続けて記述した場合は「and」条件
- cssにピリオド（.）+class名をカンマ(,)で区切って記述した場合は「and」条件
「おれ～、おかしいなぁ」と思ってCSSを細かく見ていたら、カンマが抜けていたとか入っていたとか、そんなことがよくあります。
（これはidとの組み合わせでも成り立ちますが、後述します）
が、
やっかいなのは、（＊）以降は、IE6を除く話だということ。
例えば
緑文字 緑背景 緑罫線
は、今までの指定だと正しくは文字サイズは小さいままですが、IE6だけ、文字が大きくなっているはずです。
結果↓
緑文字 緑背景 緑罫線
これは、
IE6ではCSSの複数class指定は実装しておらず、並べられたクラスの最後のもののみ適用される
というもので、上の例では、「color_green」があろうがなかろうが、「bg_green」があろうがなかろうが、最後の「border_green」さえあればフォントサイズを80pxにすると解釈されてしまうんです
で、保留していたidとclassの複合指定ですが、
#color_red.bg_red.border_red {
font-size:80px;
}
#color_red.bg_blue.border_red {
font-size:80px;
}
#color_red.bg_green.border_red {
font-size:80px;
}
としたとき、本当は同一ページに同じidのものを2つ以上書くのは反則ですが、別々に試しても下のように書いても結果は同じだったので、説明の都合上この（↓）ように書きますが、
赤文字 赤背景 赤罫線
赤文字 青背景 赤罫線
赤文字 緑背景 赤罫線
赤文字 黒背景 赤罫線
の結果は、
赤文字 赤背景 赤罫線
赤文字 青背景 赤罫線
赤文字 緑背景 赤罫線
赤文字 黒背景 赤罫線
となり、idと複数class指定の組み合わせも成り立つということが分かります。
最後の「bg_black」は今回定義していないので、当然80pxにはならないし、黒背景にもなりませんが、IE6は、前述したとおり「classの複数指定は最後のclassを解釈する」という規則通り、文字が大きくなりました（背景色はさすがに黒にはならない）。
ただし、この書き方は、IE6で複数クラスを使う時の注意点 | CSS-EBLOGの「IDと連携して使用する場合の注意」からすればうまくいかないはずですが、うまくいっちゃいました。
確かに、idとclassの複合で、思い通りにならないことは良くあるので、そういうバグはあるとは思うのですが、いまひとつ、どのような条件のときに起きるのか、まだ分かりません。
分かったらまた追記したいと思います。
