Seletor de CSS que se aplica a elementos com duas classs

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

Hello Foo
Hello World
Hello Bar

Qual CSS eu poderia escrever para selecionar SOMENTE o segundo elemento na lista, baseado no fato de que ele é um membro de ambas as classs de barra foo AND?

Encadeie os dois seletores de class (sem um espaço intermediário):

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

Se você ainda tiver que lidar com navegadores antigos como o IE6, esteja ciente de que ele não lê corretamente os seletores de class encadeados: ele só lerá o último seletor de class ( .bar neste caso), independentemente de quais outras classs 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 é:

 
Hello Foo
Hello World
Hello Bar

A saída no IE6 é:

 
Hello Foo
Hello World
Hello Bar

Notas de rodapé:

  • Navegadores suportados:
    1. Não selecionado como este elemento só tem class foo .
    2. Selecionado como este elemento tem ambas as classs foo e bar .
    3. Não selecionado como este elemento só tem bar class.
  • IE6:
    1. Não selecionado como este elemento não tem bar class.
    2. Selecionado como este elemento tem bar classs, independentemente de quaisquer outras classs listadas.