Pseudoclasses e Seletores Personalizados
Compreenda pseudoclasses integradas, como :has(), :not() e :nth-child(), e aprenda a criar seus próprios seletores personalizados para filtrar elementos de forma reutilizável.
Pseudoclasses e Seletores Personalizados é uma aula grátis de jQuery Academy no CoddyKit. Esta é a aula 2 de 3. Você pode ler a aula completa abaixo gratuitamente — depois pratica ao vivo no navegador com um editor de código integrado e um tutor de IA 24/7. Faz parte do caminho de aprendizado de jQuery Academy, e seu progresso é sincronizado entre a web e o app CoddyKit. O curso de jQuery Academy inclui 3 aulas no total.
Desbloqueie o poder com pseudoclasses
Bem-vindo aos seletores avançados! Hoje, exploraremos as pseudoclasses, palavras-chave especiais adicionadas aos seletores para definir um estado especial do elemento selecionado.
- Elas permitem selecionar elementos que não são facilmente identificados por atributos ou nomes HTML padrão.
- Pense nelas como filtros dinâmicos para suas seleções.
Elas começam com dois-pontos (:), como :hover ou :first-child.
Selecionar por posição: :nth-child()
A pseudo-classe :nth-child() seleciona elementos com base na posição que ocupam entre um grupo de elementos irmãos. Ela é extremamente útil para estilizar listas ou linhas de tabelas.
:nth-child(n): seleciona o enésimo filho.:nth-child(odd): seleciona os filhos em posições ímpares.:nth-child(even): seleciona os filhos em posições pares.
A contagem começa em 1 para o primeiro filho.
Estilização com :nth-child(odd/even)
Veja como :nth-child(odd) e :nth-child(even) podem aplicar rapidamente estilos alternados, como as listras de uma zebra em uma lista.
Execute este exemplo para ver o efeito:
$(document).ready(function() {
// Selects odd list items and makes their text blue
$('li:nth-child(odd)').css('color', 'blue');
// Selects even list items and makes their text green
$('li:nth-child(even)').css('color', 'green');
});
// HTML Structure (imagine this is in your page):
// <ul>
// <li>Item 1</li>
// <li>Item 2</li>
// <li>Item 3</li>
// <li>Item 4</li>
// </ul>Fórmulas avançadas de :nth-child()
Você pode usar fórmulas mais complexas dentro de :nth-child(), como An+B. Aqui, A representa o tamanho do ciclo, e B é um deslocamento.
:nth-child(3n): seleciona todos os filhos a cada 3 posições (3º, 6º, 9º...).:nth-child(3n+1): seleciona o 1º, o 4º, o 7º... filho.
Isso permite seleções baseadas em intervalos muito precisas.
Excluindo elementos com :not()
A pseudo-classe :not() permite excluir elementos específicos de uma seleção. É como dizer: "selecione todos os parágrafos, exceto aqueles com a classe 'intro'".
- Ela recebe outro seletor como argumento:
:not(selector). - Isso é muito útil para refinar seleções existentes sem escrever novas seleções complexas.
Usando :not() na prática
Imagine que você queira adicionar uma borda a todos os itens de uma lista, exceto ao primeiro. :not(:first-child) é perfeito para isso.
Veja como :not() ajuda a excluir o primeiro item:
$(document).ready(function() {
// Selects all list items that are NOT the first child
$('li:not(:first-child)').css('border-top', '1px solid gray');
});
// HTML Structure:
// <ul>
// <li>First Item</li>
// <li>Second Item</li>
// <li>Third Item</li>
// </ul>Selecionando elementos pais com :has()
A pseudo-classe :has() é única: ela seleciona um elemento se ele contiver pelo menos um elemento que corresponda ao seletor passado como argumento.
- É como perguntar: "Dê-me todas as
<div>que tenham uma tag<p>dentro delas." - Isso permite selecionar elementos pais com base nas características de seus filhos.
Destacando com :has()
Suponha que você queira destacar apenas os contêineres <div> que contenham uma imagem. :has('img') faz isso de forma eficiente.
Execute este código para ver qual div recebe uma borda:
$(document).ready(function() {
// Selects divs that contain an image and adds a border
$('div:has(img)').css('border', '2px solid red');
});
// HTML Structure:
// <div id="container1">
// <p>Text only</p>
// </div>
// <div id="container2">
// <img src="example.png" alt="An image">
// <p>Text and image</p>
// </div>Seletores personalizados: estendendo o jQuery
E se os seletores integrados do jQuery não forem suficientes? Você pode criar seus próprios pseudo-seletores personalizados! Isso permite filtrar elementos com base em uma lógica personalizada e altamente específica.
- Você os registra usando
jQuery.expr[':']. - Isso torna seu código de seleção mais limpo e reutilizável.
É um recurso avançado para necessidades de filtragem realmente específicas.
Criando um :contains-word() personalizado
Vamos criar um seletor personalizado chamado :contains-word(), que encontra elementos que contêm uma palavra inteira específica, e não apenas uma parte dela.
Este exemplo define :contains-word() e depois o utiliza:
$(document).ready(function() {
// Define a custom pseudo-selector ':contains-word'
$.expr[':']['contains-word'] = $.expr.createPseudo(function(word) {
var pattern = new RegExp('\b' + word + '\b', 'i');
return function(elem) {
return pattern.test($(elem).text());
};
});
// Use the custom selector to find paragraphs containing 'hello'
$('p:contains-word("hello")').css('background-color', 'yellow');
});
// HTML Structure:
// <p>Say hello world!</p>
// <p>Another paragraph.</p>
// <p>Hello there!</p>Desafio sobre pseudo-classes
Considere o seguinte HTML:
<ul>
<li class="special">One</li>
<li>Two</li>
<li class="special">Three</li>
<li>Four</li>
<li class="special">Five</li>
</ul>Qual seletor jQuery selecionaria somente 'Two' e 'Four'?
Recapitulação: pseudo-classes e seletores personalizados
Você dominou técnicas avançadas de seleção com jQuery!
- As pseudo-classes (como
:nth-child(),:not()e:has()) permitem selecionar elementos com base no estado deles ou na relação com outros elementos. :nth-child()seleciona elementos por posição, inclusive usando fórmulas.:not()exclui elementos de uma seleção.:has()seleciona elementos pais com base em seus filhos.- Você também pode criar seus próprios pseudo-seletores personalizados com
jQuery.expr[':']para realizar filtragens altamente específicas.
Continue praticando para refinar a seleção de elementos no DOM!
Perguntas Frequentes
A aula “Pseudoclasses e Seletores Personalizados” é grátis?
Sim — o texto completo de “Pseudoclasses e Seletores Personalizados” é grátis para ler aqui na web. Para praticá-la interativamente (um editor de código integrado e um tutor de IA 24/7) e desbloquear o restante do curso de jQuery Academy, atualize para CoddyKit PRO. O curso de jQuery Academy inclui 3 aulas no total.
O que vou aprender em “Pseudoclasses e Seletores Personalizados”?
Compreenda pseudoclasses integradas, como :has(), :not() e :nth-child(), e aprenda a criar seus próprios seletores personalizados para filtrar elementos de forma reutilizável. Você pratica jQuery Academy com código prático que executa diretamente no navegador, e um tutor de IA 24/7 responde suas dúvidas enquanto trabalha na aula.
Preciso ter experiência prévia para começar jQuery Academy?
Nenhuma experiência prévia é necessária. jQuery Academy no CoddyKit é estruturado para alunos iniciantes até avançados, então você pode começar aqui ou desde o início e aprender no seu ritmo. Esta é a aula 2 de 3.
Quanto tempo leva a aula “Pseudoclasses e Seletores Personalizados”?
A maioria das aulas CoddyKit leva cerca de 5–10 minutos. Cada uma é compacta e interativa, então você faz progresso constante e retoma exatamente de onde parou entre web e app.
Posso escrever e executar código nesta aula de jQuery Academy?
Sim. Cada aula de jQuery Academy inclui um editor de código integrado, então você escreve e executa código real direto no navegador e recebe feedback de IA instantaneamente — nenhuma configuração local necessária.
Todas as aulas deste curso
- Seletores de Atributos Avançados
- Pseudoclasses e Seletores Personalizados
- Técnicas Eficientes de Percurso pelo DOM