Selector de CSS que se aplica a elementos con dos clases

¿Hay alguna manera de seleccionar un elemento con CSS basado en el valor del atributo de clase que se establece en dos clases específicas? Por ejemplo, digamos que tengo 3 divs:

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

¿Qué CSS podría escribir para seleccionar SOLO el segundo elemento de la lista, basado en el hecho de que es miembro de las clases foo AND bar?

Encadene ambos selectores de clase (sin un espacio intermedio):

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

Si todavía tiene que lidiar con navegadores antiguos como IE6, tenga en cuenta que no lee correctamente los selectores de clase encadenados: solo leerá el último selector de clase ( .baren este caso), independientemente de las otras clases que enumere.

Para ilustrar cómo otros navegadores e IE6 interpretan esto, considere este CSS:

* {
    color: black;
}

.foo.bar {
    color: red;
}

La salida en los navegadores compatibles es:

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

La salida en IE6 es:

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

Notas al pie:

• Navegadores compatibles:
  1. No seleccionado ya que este elemento solo tiene clase foo.
  2. Seleccionado como este elemento tiene ambas clases fooy bar.
  3. No seleccionado ya que este elemento solo tiene clase bar.
     
     
• IE6:
  1. No seleccionado ya que este elemento no tiene clase bar.
  2. Seleccionado como este elemento tiene clase bar, independientemente de cualquier otra clase listada.