Pemilih CSS yang berlaku untuk elemen dengan dua kelas

Apakah ada cara untuk memilih elemen dengan CSS berdasarkan nilai atribut kelas yang disetel ke dua kelas tertentu. Sebagai contoh, katakanlah saya memiliki 3 div:

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

CSS apa yang bisa saya tulis untuk memilih HANYA elemen kedua dalam daftar, berdasarkan pada fakta bahwa itu adalah anggota dari kedua kelas foo DAN bar?

Rantai kedua pemilih kelas (tanpa spasi di antaranya):

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

Jika Anda masih harus berurusan dengan browser kuno seperti IE6, perlu diketahui bahwa itu tidak membaca pemilih kelas dirantai dengan benar: itu hanya akan membaca pemilih kelas terakhir ( .bardalam kasus ini) sebagai gantinya, terlepas dari apa pun kelas yang Anda daftarkan.

Untuk mengilustrasikan bagaimana browser lain dan IE6 menginterpretasikan ini, pertimbangkan CSS ini:

* {
    color: black;
}

.foo.bar {
    color: red;
}

Output pada browser yang didukung adalah:

<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] -->

Output pada IE6 adalah:

<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] -->

Catatan kaki:

• Browser yang didukung:
  1. Tidak dipilih karena elemen ini hanya memiliki kelas foo.
  2. Dipilih karena elemen ini memiliki kedua kelas foodan bar.
  3. Tidak dipilih karena elemen ini hanya memiliki kelas bar.
     
     
• IE6:
  1. Tidak dipilih karena elemen ini tidak memiliki kelas bar.
  2. Dipilih karena elemen ini memiliki kelas bar, terlepas dari kelas apa pun yang terdaftar.