Dando continuidade ao artigo de seletores.
\nPara todos os exemplos ser\u00e1 utilizado o mesmo c\u00f3digo JavaScript, variando apenas o c\u00f3digo para acessar o elemento. C\u00f3digo que se encontra na linha 5. Abaixo veja o c\u00f3digo completo.
\nPara disparar a a\u00e7\u00e3o usamos um bot\u00e3o.<\/p>\n
<script type="text\/javascript" src="..\/jquery-1.2.6.js"><\/script>\r\n<script type="text\/javascript">\r\n\t$(function(){\r\n \t\t$('button').click(function () {\r\n\t\t\t\/*linha dos exemplos*\/\r\n\t\t\t});\r\n\t\t});\r\n<\/script>\r\n<\/pre>\n<\/p>\n
Seletor anterior irm\u00e3o<\/h3>\n
Esse seletor est\u00e1 previsto para as CSS 3. Esse seletor tem como objetivo acessar todos os elementos irm\u00e3os que se seguem ao elemento declarado como anterior.<\/p>\n
$('h2 ~ p').css('background', 'red');<\/pre>\nHTML<\/strong><\/p>\n<button type="button">Vermelha<\/button>\r\n\t<p>Par\u00e1grafo antes do cabe\u00e7alho h2<\/p>\r\n\r\n<h2>Cabe\u00e7alho h2<\/h2>\r\n\t<p>Primeiro par\u00e1grafo<\/p>\r\n\t<p>Segundo par\u00e1grafo<\/p>\r\n<div>conte\u00fado da primeira div<\/div>\r\n\t<p>Terceiro par\u00e1grafo<\/p>\r\n\r\n<div>\r\n\t<p>Quarto par\u00e1grafo, dentro da segunda div<\/p>\r\n<\/div>\r\n<p>Quinto par\u00e1grafo<\/p>\r\n<\/pre>\nNo exemplo acima todos os par\u00e1grafos que est\u00e3o fora das divs ser\u00e3o afetados, j\u00e1 que ele vem ap\u00f3s o elemento h2 e s\u00e3o irm\u00e3os, s\u00e3o filhos do elemento body. Os que est\u00e3o dentro das divs, n\u00e3o s\u00e3o afetados, porque seguem ao elemento div e n\u00e3o h2.
\nUm r\u00e1pido teste. Se trocarmos o seletor para:<\/p>\n
$('div ~ p').css('background', 'red');<\/pre>\nVoc\u00ea seria capaz de dizer qual o efeito final. Quem ser\u00e1 alvo da estiliza\u00e7\u00e3o?<\/p>\n
Seletores filtros<\/h3>\n
Utilizado para fazer um filtro com uma condi\u00e7\u00e3o. Podemos usar seletor simples e composto.<\/p>\n
Seletor first, last e not<\/h4>\n
\u00c9 alvo o primeiro elemento do conjunto de elementos selecionados.<\/p>\n
$('p:first').css('background', 'red');<\/pre>\nHTML<\/strong><\/p>\n\t<button type="button">Vermelha<\/button>\r\n\t<div>\r\n\t\t<p>Primeiro par\u00e1grafo<\/p>\r\n\t\t<p>Segundo par\u00e1grafo<\/p>\r\n <p>Terceiro par\u00e1grafo<\/p>\r\n <\/div>\r\n<\/pre>\nO alvo ser\u00e1 o primeiro par\u00e1grafo.
\nSe trocarmos o seletor por:<\/p>\n
$('p:last').css('background', 'red');<\/pre>\nO alvo ser\u00e1 o \u00faltimo par\u00e1grafo.<\/p>\n
Temos tamb\u00e9m a op\u00e7\u00e3o de selecionarmos um conjunto e excluirmos uma instancia desse conjunto.<\/p>\n
$('p:not(p:last)').css('background', 'red');<\/pre>\nAcima estamos dizendo: selecione todos os p, n\u00e3o (not) o \u00faltimo p (p:last).<\/p>\n
Seletor even e odd<\/h4>\n
Este \u00e9 um seletor da biblioteca jQuery e n\u00e3o das CSS. Esse seletor acessa as ocorr\u00eancias pares do conjunto de elementos selecionados. Em JavaScript a contagem inicia em 0 (zero).<\/p>\n
$('li:even').css('background', 'red');<\/pre>\nHTML<\/strong><\/p>\n<ul>\r\n\t<li>\u00cdtem 0<\/li>\r\n \t<li>\u00cdtem 1<\/li>\r\n\t<li>\u00cdtem 2<\/li>\r\n\t<li>\u00cdtem 3<\/li>\r\n\t<li>\u00cdtem 4<\/li>\r\n<\/ul>\r\n<\/pre>\nO seletor vai afetar os seguintes itens da lista: 0, 2 e 4. Como explicado anteriormente a contagem JavaScript come\u00e7a em 0 (zero) por isso o primeiro item da lista \u00e9 afetado.
\nO Seletor odd faz tem a mesma fun\u00e7\u00e3o, s\u00f3 que acessa as ocorr\u00eancias impares.<\/p>\n
$('li:odd').css('background', 'red');<\/pre>\nSeletor eq(\u00edndice)<\/h4>\n
Este \u00e9 um seletor da biblioteca jQuery e n\u00e3o das CSS. Com esse seletor podemos dizer quem queremos acessar.<\/p>\n
$('li:eq(3)').css('background', 'red');<\/pre>\nO item 4 da lista ser\u00e1 selecionado (j\u00e1 que a contagem inicia em 0).<\/p>\n
Seletor gt(\u00edndice)<\/h4>\n
Este \u00e9 um seletor da biblioteca jQuery e n\u00e3o das CSS. Acessa todas os elementos acima do valor passado no \u00edndice. Com o seletor acima ser\u00e1 selecionado o item 3 e 4 da lista.<\/p>\n
$('li:gt(2)').css('background', 'red');<\/pre>\nSeletor lt(\u00edndice)<\/h4>\n
Faz o mesmo que o seletor gt(\u00edndice), s\u00f3 que acessa os elementos menores quem o valor passado para \u00edndice.<\/p>\n
$('li:lt(2)').css('background', 'red');<\/pre>\n