10

Tenho uma div que usa duas classes CSS. Eis o HTML :

<div class="box1"></div>
<div class="box1 destaque"></div>
<div class="box2"></div>
<div class="box2 destaque"></div>
<div class="box3"></div>

Quero selecionar a div que tenha as classe box1 e destaque (no meu exemplo a segunda div) apenas.

O que já tentei :

Se faço : $('.box1') seleciono as duas divs com classe box1. Não é o que quero.

E se faço : $('.destaque') acabo selecionado uma div com box1 e outra com box2 (o que não quero)

Já tentei $('.box1 .destaque') mas não seleciona nada.

Então como devo montar o seletor jQuery para buscar as divs que usam as classes box1 e destaque?

5 Respostas 5

16

Tira o espaço:

$('.box1.destaque')

http://jsfiddle.net/2w9x7/

1
9

No caso de ser só div com .box1 e .destaque:

$('div.box1.destaque');

Na ordem dos seletores, o primeiro pode ser o elemento desejado, no exemplo div em seguida você vai especificar algumas características do elemento:

  • # para ID
  • . para classes
  • [] para atributos, exemplo: [rel=teste] seleciona <div rel="teste">

No final é possível usar o : para pseudo seletores (estado, como :hover, :active, etc ou primeiro filho, impares, etc)

Quando você adiciona o espaço no seletor, ele identifica que você está querendo ir para o próximo nível, então agora são elementos filhos da caracteristica que você está buscando.

Então $('.box1 .destaque'); vai achar isso:

<div class="box1">
    <div class="destaque"></div> <-- este elemento foi o único selecionado
</div>

<div class="box1 destaque">
    <div></div>
</div>
6

Quando você diz que um elemento tem várias propriedades tanto no quanto no você insere todos os seletores e pseudo classes juntos

Exemplo:

#id.classe1.classe2[atributo=valor] {
    display: inherit;
}

O exemplo acima corresponderia a um elemento assim:

<span id="id" class="classe1 classe2" atributo="valor">elemento</span>

Se você separar por espaço você está procurando um elemento que contém o outro. Exemplo:

#id .classe1 .classe2 [atributo='valor'] {
    display: inherit;
}

O exemplo acima corresponderia a um elemento assim:

<span id="id">
    <span class="classe1">
        <span class="classe2">
            <span atributo="valor">elemento</span>
        </span>
    </span> 
</span>
3

Ao informar o seletor: .box1 .destaque você procura por a classe .destaque dentro de .box1. Como o elemento que você deseja selecionar possui ambas as classes, o seletor correto é:.box1.destaque, que iria retornar:

<div class="box1 destaque"></div>

Espero ter ajudado.

1

$(".box2.destaque").html('Class 1');
$(".box1.destaque").html('Class 2');
.box1{
  color: red;
}

.box2{
  color: blue;
}
<div class="box1"></div>
<div class="box1 destaque"></div>
<div class="box2"></div>
<div class="box2 destaque"></div>
<div class="box3"></div>

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .