Seletor de CSS que se aplica a elementos com duas classes

Existe uma maneira de selecionar um elemento com CSS com base no valor do atributo de classe que está sendo definido para duas classes específicas. Por exemplo, digamos que eu tenho 3 divs:

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

Qual CSS eu poderia escrever para selecionar SOMENTE o segundo elemento da lista, com base no fato de ser um membro das classes foo AND bar?

Encadear os dois seletores de classe (sem um espaço no meio):

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

Se você ainda precisar lidar com navegadores antigos como o IE6, lembre-se de que ele não lê os seletores de classe encadeados corretamente: ele lerá apenas o último seletor de classe ( .barnesse caso), independentemente de quais outras classes você listar.

Para ilustrar como outros navegadores e o IE6 interpretam isso, considere este CSS:

* {
    color: black;
}

.foo.bar {
    color: red;
}

A saída nos navegadores suportados é:

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

A saída no 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] -->

Notas de rodapé:

• Navegadores suportados:
  1. Não selecionado, pois esse elemento possui apenas classe foo.
  2. Selecionado como este elemento tem duas classes fooe bar.
  3. Não selecionado, pois esse elemento possui apenas classe bar.
     
     
• IE6:
  1. Não selecionado porque este elemento não possui classe bar.
  2. Selecionado como esse elemento tem classe bar, independentemente de quaisquer outras classes listadas.