[解決済み] 2つのクラスを持つ要素に適用するCSSセレクタ

質問

CSSで、class属性の値が特定の2つのクラスに設定されていることを条件に、要素を選択する方法はありますか？例えば、3つのdivがあるとします。

<div class="foo">Hello Foo</div>
<div class="foo bar">Hello World</div>
<div class="bar">Hello Bar</div>

リストの2番目の要素がfooとbarの両方のクラスのメンバーであることに基づいて、2番目の要素だけを選択するためには、どのようなCSSを書けばよいでしょうか。

どのように解決するのですか？

両方のクラスセレクタを連結する（間にスペースを入れない）。

.foo.bar {
    /* Styles for element(s) with foo AND bar classes */
}

IE6 のような古いブラウザをまだ使っている場合は、連鎖したクラスセレクタを正しく読み取れないことに注意してください。 最後の クラスセレクタ( .bar のように、他のクラスがどのようなものであっても、その代わりとして使用します。

他のブラウザやIE6がどのように解釈するかを説明するために、次のようなCSSを考えてみましょう。

* {
    color: black;
}

.foo.bar {
    color: red;
}

対応ブラウザでの出力は

<div class="foo">Hello Foo</div>       <!-- Not selected, black text [1] -->
<div class="foo bar">Hello World</div> <!-- Selected, red text [2] -->
<div class="bar">Hello Bar</div>       <!-- Not selected, black text [3] -->

IE6での出力は

<div class="foo">Hello Foo</div>       <!-- Not selected, black text [1] -->
<div class="foo bar">Hello World</div> <!-- Selected, red text [2] -->
<div class="bar">Hello Bar</div>       <!-- Selected, red text [2] -->

脚注です。

• 対応ブラウザ
  1. 未選択 この要素はクラス foo .
  2. 選択された この要素は両方のクラスを持っているので foo と bar .
  3. 選択されていない この要素はクラス bar .
     
• IE6です。
  1. 選択されていない この要素にはクラスがないため bar .
  2. 選択された この要素にはクラス bar 他のクラスがどうであろうと、です。