Skip to main content
added 92 characters in body
Fonte Link
Gabriel Gartz
  • 5,7mil
  • 3
  • 25
  • 48

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 $('div'.box1 .box1'destaque'); vai achar isso:

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

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

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 $('div .box1'); vai achar isso:

<div>
    <div class="box1"></div> // este elemento foi selecionado
</div>

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>
Fonte Link
Gabriel Gartz
  • 5,7mil
  • 3
  • 25
  • 48

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 $('div .box1'); vai achar isso:

<div>
    <div class="box1"></div> // este elemento foi selecionado
</div>