2つのクラスを持つ要素に適用されるCSSセレクター

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

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

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リストされている他のクラスに関係なく、この要素にはclassがあるため、選択されています。