Você pode direcionar um elemento com CSS apenas se 2 classes estiverem presentes?

86

Como você provavelmente já sabe, você pode ter várias classes em elementos separados por um espaço.

Exemplo

<div class="content main"></div>

E com CSS você pode direcionar isso divcom .contentou .main. Existe uma maneira de direcioná-lo se e somente se ambas as classes estiverem presentes?

Exemplo

<div class="content main">I want this div</div>
<div class="content">I don't care about this one</div>
<div class="main">I don't want this</div>

Qual seletor de CSS eu usaria para obter divapenas o primeiro (suponha que não posso usar .content:first-childou semelhante)?

css css-selectors alex
fonte

Respostas:

136

Sim, basta concatenar-los: .content.main. Veja seletor de classe CSS .

Mas observe que o Internet Explorer até a versão 6 não oferece suporte a vários seletores de classe e apenas honra o último nome da classe.

quiabo
fonte
Contanto que seja 'até' e não 'inclusivo' do IE6 :)
alex
Não, o IE6 não entende corretamente os seletores CSS encadeados. Essa regra se aplicará a todos os elementos com class = "main", independentemente de serem class = "content" também
Gareth
Uma ilustração para o IE6 em comparação com outros navegadores para quem se importa: stackoverflow.com/questions/3772290/…
BoltClock
11

Só por causa dele (eu realmente não recomendo que você faça isso), não é uma outra maneira de fazê-lo:

.content[class~="main"] {}

Ou:

.main[class~="content"] {}

Referência: http://www.w3.org/TR/CSS2/selector.html

E [foo ~ = "aviso"] Corresponde a qualquer elemento E cujo valor do atributo "foo" é uma lista de valores separados por espaço , um dos quais é exatamente igual a "aviso"

Demo: http://jsfiddle.net/eXrSg/

Por que isso é realmente útil (pelo menos para o IE6):

Como o IE6 não oferece suporte a várias classes, não podemos usar .content.main, mas existem algumas bibliotecas javascript como o IE-7.js que habilitam o seletor de atributos, mas ainda parecem falhar quando se trata de várias classes. Eu testei essa solução alternativa no IE6 com javascript habilitando o seletor de atributos, e é feia, mas funciona.

Ainda estou para encontrar um script que faça com que o IE6 suporte vários seletores de classe, mas encontrei muitos que permitem seletores de atributo. Se alguém souber de algum que funcione , diga-me nos comentários para que eu possa me livrar dessa solução alternativa.

Wesley Murch
fonte