<script type="text/javascript" src="../jquery-1.2.6.js"></script>
<script type="text/javascript">
	$(function(){
    		$('button').click(function () {
			/*linha dos exemplos*/
			});
		});
</script>

Seletores de conteúdo

Seletor contains

Esse seletor é exclusivo da biblioteca jQuery. Acessa o texto definido no parâmetro.

$('div:contains(jQuery)').css('text-decoration', 'underline');

HTML

<button type="button">Alterar</button>
    <div><p>Biblioteca jQuery</p></div>
    <div><p>div é elemento de bloco</p></div>
    <div>Biblioteca jQuery é ótima</div>

Ao disparar o evento o seletor acessa todos elementos div e procura o nome jQuery. No exemplo será afetada a primeira linha, mesmo estando dentro do elemento p, pois é descendente do elemento dv.
A terceira linha será afetada também.

Seletor empty

Acessa todos elementos que não tenham conteúdos.

$('td:empty').text('Estava vazia') .css('background', 'red');

HTML

<button type="button">Vermelha</button>
	  <table border="1">
    <tr>
    	<td>Com conteúdo</td><td></td>
    </tr>
    <tr>
    	<td>Com conteúdo</td><td></td>
    </tr>
    <tr>
	<td></td><td>Com conteúdo</td>
    </tr>
  </table>

No exemplo acima o seletor procura as células vazias e escreve o texto “Estava vazia”.

Seletor parent

Seletor exclusivo da biblioteca. Acessa todas as ocorrências de elementos que sejam elementos pais de outros elementos e até texto.

$('p:parent').css('background', 'red');

HTML

<button type="button">Vermelha</button>
	<p>Texto do primeiro parágrafo</p>
	<p></p>
	<p>Texto do <b>Terceiro</b>parágrafo</p>

Nesse caso será alvo o primeiro e o terceiro parágrafo. O Segundo não será alvo pois não tem conteúdo.

Seletor has

Exclusivo da biblioteca. Acessa elementos que contenham pelo menos um elemento que coincide com o especificado no seletor.

$(‘div:has(p)’).css('background','yellow');

HTML

<div><p>Olá! Aqui é um parágrafo</p></div>
  <div>Olá! Aqui é outro parágrafo</div>

A div que contem o elemento p é afetada, já que possui ao menos um elemento p dentro da div.

Isso vai interessar você também

• Nenhum post relacionado

<script type="text/javascript" src="../jquery-1.2.6.js"></script>
<script type="text/javascript">
	$(function(){
    		$('button').click(function () {
			/*linha dos exemplos*/
			});
		});
</script>

Seletor anterior irmão

Esse seletor está previsto para as CSS 3. Esse seletor tem como objetivo acessar todos os elementos irmãos que se seguem ao elemento declarado como anterior.

$('h2 ~ p').css('background', 'red');

HTML

<button type="button">Vermelha</button>
	<p>Parágrafo antes do cabeçalho h2</p>

<h2>Cabeçalho h2</h2>
	<p>Primeiro parágrafo</p>
	<p>Segundo parágrafo</p>
<div>conteúdo da primeira div</div>
	<p>Terceiro parágrafo</p>

<div>
	<p>Quarto parágrafo, dentro da segunda div</p>
</div>
<p>Quinto parágrafo</p>

No exemplo acima todos os parágrafos que estão fora das divs serão afetados, já que ele vem após o elemento h2 e são irmãos, são filhos do elemento body. Os que estão dentro das divs, não são afetados, porque seguem ao elemento div e não h2.
Um rápido teste. Se trocarmos o seletor para:

$('div ~ p').css('background', 'red');

Você seria capaz de dizer qual o efeito final. Quem será alvo da estilização?

Seletores filtros

Utilizado para fazer um filtro com uma condição. Podemos usar seletor simples e composto.

Seletor first, last e not

É alvo o primeiro elemento do conjunto de elementos selecionados.

$('p:first').css('background', 'red');

HTML

	<button type="button">Vermelha</button>
	<div>
		<p>Primeiro parágrafo</p>
		<p>Segundo parágrafo</p>
        <p>Terceiro parágrafo</p>
    </div>

O alvo será o primeiro parágrafo.
Se trocarmos o seletor por:

$('p:last').css('background', 'red');

O alvo será o último parágrafo.

Temos também a opção de selecionarmos um conjunto e excluirmos uma instancia desse conjunto.

$('p:not(p:last)').css('background', 'red');

Acima estamos dizendo: selecione todos os p, não (not) o último p (p:last).

Seletor even e odd

Este é um seletor da biblioteca jQuery e não das CSS. Esse seletor acessa as ocorrências pares do conjunto de elementos selecionados. Em JavaScript a contagem inicia em 0 (zero).

$('li:even').css('background', 'red');

HTML

<ul>
	<li>Ítem 0</li>
   	<li>Ítem 1</li>
	<li>Ítem 2</li>
	<li>Ítem 3</li>
	<li>Ítem 4</li>
</ul>

O seletor vai afetar os seguintes itens da lista: 0, 2 e 4. Como explicado anteriormente a contagem JavaScript começa em 0 (zero) por isso o primeiro item da lista é afetado.
O Seletor odd faz tem a mesma função, só que acessa as ocorrências impares.

$('li:odd').css('background', 'red');

Seletor eq(índice)

Este é um seletor da biblioteca jQuery e não das CSS. Com esse seletor podemos dizer quem queremos acessar.

$('li:eq(3)').css('background', 'red');

O item 4 da lista será selecionado (já que a contagem inicia em 0).

Seletor gt(índice)

Este é um seletor da biblioteca jQuery e não das CSS. Acessa todas os elementos acima do valor passado no índice. Com o seletor acima será selecionado o item 3 e 4 da lista.

$('li:gt(2)').css('background', 'red');

Seletor lt(índice)

Faz o mesmo que o seletor gt(índice), só que acessa os elementos menores quem o valor passado para índice.

$('li:lt(2)').css('background', 'red');

Essa foi a segunda parte dos seletores. Em breve seletores jQuery parte III. Abraço a todos.

Isso vai interessar você também

• Nenhum post relacionado

Para todos os exemplos será utilizado o mesmo código JavaScript, variando apenas o código para acessar o elemento. Código que se encontra na linha 5. Abaixo veja o código completo.
Para disparar a ação usamos um botão.

<script type="text/javascript" src="../jquery-1.2.6.js"></script>
<script type="text/javascript">
	$(function(){
    		$('button').click(function () {
			/*linha dos exemplos*/
			});
		});
</script>

Seletor simples:

Acessa um elemento através do valor passado para o atributo id, class ou o próprio elemento da (X)HTML.
Exemplo:

$("#div_dois").css('background', 'red');

HTML

	<button type="button">Alterar cor</button>
	<div id="div_um">Conteúdo da div um</div>
	<div id="div_dois">Conteúdo da div dois</div>

Ao clicar no botão mudará a cor de fundo de todas divs que estiverem com o valor igual a div_dois no atributo id.

Para seletores do tipo classe a idéia é a mesma. Ao invés de usar # (sustenido) usaríamos . (ponto).

$(".div_dois").css('background', 'red');

Para selecionarmos um elemento do HTML usamos:

$("div").css('background', 'red');

No exemplo acima todas as divs do documento serão afetadas, mesmo que tenham classes e ids atribuídas. O mesmo ocorre com outros elementos HTML.

Agrupando seletores

Se para vários seletores temos a mesma estilização, uma alternativa é fazer o agrupamento deles.
Exemplo:

$('p, #div_um, .div_dois').css('background', 'gold');

HTML

         	<button type="button">Altera cor</button>
		<div id="div_um">Conteúdo da div_um</div>
		<p>Texto de um parágrafo</p>
		<div class="div_dois">DIV com classe div_dois</div>
		<p class="diferente"> Parágrafo com classe igual a diferente</p>

Seletores compostos:

Temos um seletor composto quando usamos a combinação de dois um ou mais seletores simples. Para os seletores compostos temos três sinais de combinação. Veja um exemplo de cada:

Seletor ancestral descendente

$(div span').css('background', 'gold');

HTML

       <button type="button">Altera cor</button>
	<div>
	<p><span>jQuery</span> é uma <span>biblioteca</span> JavaScript</p>
	</div>
	<p>Seletores são <span>importantes</span></p>

Nesse caso apenas as palavras jQuery e biblioteca foram alvo, pois ambas estão marcadas com span e são descendentes da div. A palavra importantes, também marcada com span, não foi alvo porque é descendente de parágrafo e não de div.

Seletor pai filho

O elemento alvo é o filho do pai especificado no seletor.

$('div > span').css('background', 'red');

HTML

	<button type="button">Altera cor</button>
	<div>
	<p>A palavra <span>jQuery</span> e a palavra <span>css</span> foram alvos do seletor</p>
	</div>
	<p>A palavra <span>design</span> não será alvo do seletor</p>

Nesse exemplo nada acontecerá. Por quê? Simples, nenhum elemento span é filho de div e sim descendente.
Alteramos o código para:

       <button type="button">Altera cor</button>
	<div>
	A palavra <span>jQuery</span> e a palavra <span>css</span> foram alvos do seletor
	</div>
	<p>A palavra <span>design</span> não será alvo do seletor</p>

Veja que agora temos dois elementos span filho da div. Esses dois elementos serão alvo do seletor.

Seletor anterior próximo

Acessa apenas o próximo elemento que se segue do elemento declarado como anterior.

$('h2 + p').css('background', 'red');

HTML

	<button type="button">Vermelha</button>
        <div>
          <h2>Título</h2>
          <p>jQuery é uma excelente biblioteca</p>
          <p>Estou aprendendo muito com jQuery</p>
        </div>

Nesse exemplo apenas o primeiro parágrafo será alvo. Quando declaramos h2 + p estamos dizendo: Ache todos parágrafos que vier imediatamente após h2.
Nesse artigo tive a intenção de mostrar algumas formas de seletores, que se bem explorados nos livrão de fazer marcações adicionais em nosso (X)HTML, deixando o código mais claro e limpo. Em breve seletores jQuery parte II.
Abraço a todos.

Isso vai interessar você também

• Paginação em listas HTML com jQuery Quick Pagination
• 20 tutoriais jQuery para galeria de imagens
• Criando máscara de entrada em formulários com Masked Input e jQuery
• FireQuery – extensão jQuery para Firefox
• Efeitos com jQuery
• Destacando linhas de tabelas ao passar o mouse
• Efeito sanfona com jQuery e Accordion
• Tabela – efeito zebra
• O que é Jquery?