Posts Tagged ‘セレクタ’

このページの目次

CSSで複数のクラスを指定したセレクタがIE6でうまく機能しない

木曜日, 9月 3rd, 2009

こんにちは、なかわけです。

仕事中に見つけたIE6の不具合。
メニューがあって、選ばれてるものだけ背景色を変えたかったときのこと。
こういう風に書くとIE6でうまく機能しませんでした。

<ul>
    <li class="menu">ねこ</li>
    <li class="menu selected">ゲーム</li>
    <li class="menu">チョコレート</li>
</ul>
.menu {
    background:#CCCCCC;
}
.menu.selected {
    background:#CC0000;
}

この場合.menuと.selectedを同時に適用したゲームの背景はグレーになり、赤くなってくれません。
このときは、別の方法で解決しましたが、以下のページに回避方法が紹介されてました。

http://css-el.seesaa.net/article/108157845.html

でも、場合によっては無駄な要素を増やしたり、CSSのセレクタに文脈セレクタを追加したりしないといけないからヤダなー。