Seletor de CSS que se aplica a elementos com duas classes


472

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?

Respostas:


735

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.

3
Importa a ordem em que eu os coloco?
Adam

3
Não importa. (Será para o IE6 por causa de como o interpreta, assumindo que você deve apoiá-lo.) #
BoltClock

6
Importa que não haja espaço entre eles?
CodyBugstein 31/03

26
@Imray: Sim, o espaço representa um seletor descendente, o que faria com que cada seletor de classe representasse um elemento diferente. Mas estamos falando de um único elemento aqui.
BoltClock

2
@ David Brossard: Sim, faz.
BoltClock
Ao utilizar nosso site, você reconhece que leu e compreendeu nossa Política de Cookies e nossa Política de Privacidade.
Licensed under cc by-sa 3.0 with attribution required.