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 ( .bar
nesse 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:
- Não selecionado, pois esse elemento possui apenas classe
foo
.
- Selecionado como este elemento tem duas classes
foo
e bar
.
- Não selecionado, pois esse elemento possui apenas classe
bar
.
- IE6:
- Não selecionado porque este elemento não possui classe
bar
.
- Selecionado como esse elemento tem classe
bar
, independentemente de quaisquer outras classes listadas.