Tipos de seletores
Tipos de seletores
Tipos de seletores é uma aula grátis de HTML for Kids no CoddyKit. Esta é a aula 1 de 1. 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 HTML for Kids, e seu progresso é sincronizado entre a web e o app CoddyKit. O curso de HTML for Kids inclui 1 aulas no total.
Introdução
Olá,
Nesta lição, aprimoraremos ainda mais nossos conhecimentos de CSS com seletores mais complexos.
Definição de vários estilos
Podemos fazer várias definições de estilo colocando ponto e vírgula entre cada estilo.
.first{
color:blue;
font-size:20px;
text-align: center;
}há um documento HTML que se torna mais complexo
Até agora, trabalhamos com seletores simples de tag, ID e classe. Porém, em alguns casos, quando a interface do usuário se torna complexa, precisaremos usar seletores mais complexos.
No exemplo abaixo, há um documento HTML que se torna mais complexo.
<body>
<div id="my-area">
<p class="first">lorem</p>
<div class="second">
<p class="third">Ipsum</p>
</div>
</div>
</body>analisar o exemplo
Agora vamos analisar nosso código.
- Há uma div com o ID my-area que atua como um contêiner dentro do corpo da página. Ela é ancestral de todos os elementos sob essa div.
- O elemento p com a primeira classe é irmão do elemento div com a segunda classe.
- O terceiro elemento é filho do segundo elemento, e o elemento my-area pode ser considerado ancestral do terceiro elemento.
Aviso
Você pode imaginar o layout HTML como uma árvore genealógica literal.
Você pode herdar características geneticamente do seu avô.
Mas, se essa herança mudar em seu pai, o gene do pai será mais dominante, e a característica herdada do avô mudará.
Combinações de seletores
Agora vamos ver como fazer combinações em seletores.
A declaração a seguir indica que o elemento com a segunda classe é descendente (filho ou neto) do elemento com a terceira classe.
Se houver um espaço entre as duas classes, isso significa que a classe à esquerda está procurando um descendente.
.second .third{
color:red;
}Seletor de filho
No exemplo abaixo,
isso significa escolher a terceira classe, que é filha da segunda classe.
O sinal de maior que significa selecionar o filho do elemento relevante.
.second > .third{
color:red;
}podemos combinar o seletor de tag e o de classe para selecionar um elemento
Ao mesmo tempo, podemos combinar o seletor de tag e o de classe para selecionar um elemento.
O exemplo abaixo selecionará os elementos p com a terceira classe.
<style>
p.third{
color:red;
}
</style>
<p class="third">Hello CSS</p>Suponha que queiramos escolher uma div com a primeira classe
Suponha que queiramos escolher uma div com a primeira classe.
No exemplo abaixo, isso significa selecionar o elemento com a primeira classe, que é filho do elemento div com o ID my-area.
Isso aumenta a especificidade do elemento a ser selecionado.
div#my-area > .first{
color:red;
}Selecionar todos
O sinal de asterisco (*) é importante entre os seletores.
E ele significa selecionar todos.
No exemplo abaixo, o seletor indica que o elemento com o ID my-area deve selecionar todos os descendentes.
O ponto ao qual precisamos estar atentos aqui é que não se trata apenas dos filhos, mas de todos os descendentes.
Se quiséssemos escolher apenas os filhos, teríamos de colocar o sinal de maior que antes do asterisco.
/* It chooses all the descendants of #my-area. */
#my-area *{
color:red;
}
/* It chooses all the children of #my-area. */
#my-area > *{
color:red;
}Seletor de irmão adjacente
Usamos o seletor de descendente e o seletor de filho; agora vamos aprender sobre o seletor de irmão.
O seletor de irmão usa o sinal + para selecionar o irmão seguinte.
Em nosso exemplo, a cor de fundo do terceiro elemento de parágrafo será definida como amarela pelo seletor.
<!DOCTYPE html>
<html>
<head>
<style>
div + p {
background-color: yellow;
}
</style>
</head>
<body>
<div>
<p>Paragraph 1 in the div.</p>
<p>Paragraph 2 in the div.</p>
</div>
<p>Paragraph 3. Not in a div.</p>
<p>Paragraph 4. Not in a div.</p>
</body>
</html>Seletor de irmão geral
Se quisermos selecionar não apenas o primeiro irmão seguinte, mas todos os irmãos que vêm depois, usamos o sinal de til (~).
O símbolo de til também é conhecido como combinador de irmãos subsequentes.
<style>
div ~ p {
background-color: red;
}
</style>
<p>Paragraph 1.</p>
<div>
<p>Paragraph 2.</p>
</div>
<span>span element.</span>
<p>Paragraph 3.</p>
<p>Paragraph 4</p>
Pseudo-classes e classes CSS
Expressões que não são uma classe, mas se comportam como uma classe, são chamadas de pseudo-classes.
Não definimos pseudo-classes para nenhum elemento em HTML.
Quando o navegador interpreta o código, ele presume que elas existem. Portanto, podemos usar pseudo-classes nos seletores CSS.
A pseudo-classe :hover
Entre as pseudo-classes, :hover é, sem dúvida, a mais conhecida.
Hover (:hover) é uma pseudo-classe definida automaticamente pelo navegador para o elemento relevante quando o mouse passa sobre ele.
As pseudo-classes são usadas depois do símbolo de dois-pontos (:) na declaração do seletor.
A sintaxe para usar uma pseudo-classe é exemplificada abaixo.
selector:pseudo-class {
property: value;
}Estilizando links com :hover
Agora vamos criar um link e ver como ele ficará quando você passar o mouse sobre ele.
Aviso: como não há um evento de passar o mouse, como na Web, em dispositivos móveis, esse efeito não será visto nos aplicativos móveis da CoddyKit.
No exemplo abaixo, vamos observar que, quando passarmos o mouse sobre o link, a cor dele ficará verde.
<!DOCTYPE html>
<html>
<head>
<style>
.my-link{
color:red;
}
.my-link:hover{
color:green;
}
</style>
</head>
<body>
<a class="my-link" href="https://www.coddykit.com">
CoddyKit Homepage Link
</a>
</body>
</html>A pseudo-classe :first-child
Uma das pseudo-classes mais confusas é :first-child.
Geralmente, ao observarmos o nome, podemos inferir que ela significa escolher o primeiro filho de um elemento.
Na verdade, essa inferência não está correta.
Ela é usada para selecionar o primeiro elemento entre os irmãos do elemento.
<!DOCTYPE html>
<html>
<head>
<style>
/* Chooses the first p element
among children of the my-box class. */
.my-box p:first-child {
font-size: 24px;
}
</style>
</head>
<body>
<div class="my-box">
<p>This is first text.</p>
<p>This is second text.</p>
<p>This is third text.</p>
</div>
</body>
</html>A pseudo-classe :last-child
last-child é o oposto da pseudo-classe first-child. Ela é usada para selecionar o último elemento entre os irmãos do elemento.
<!DOCTYPE html>
<html>
<head>
<style>
/* Chooses the last p element
among children of the my-box class. */
.my-box p:last-child {
font-size: 24px;
}
</style>
</head>
<body>
<div class="my-box">
<p>This is first text.</p>
<p>This is second text.</p>
<p>This is third text.</p>
</div>
</body>
</html>O pseudo-elemento ::before
Se quisermos adicionar algo antes de um elemento, usamos o pseudo-seletor ::before.
No exemplo abaixo, adicionamos o conteúdo 'Hello' antes dos elementos de cabeçalho.
<!DOCTYPE html>
<html>
<head>
<style>
h1::before {
content: "Hello ";
}
</style>
</head>
<body>
<h1>Coddykit</h1>
<h1>Coddykit</h1>
<h1>Coddykit</h1>
</body>
</html>O pseudo-elemento ::after
O pseudo-elemento ::after, que é o oposto do pseudo-elemento ::before, é usado para adicionar novo conteúdo depois do elemento.
<!DOCTYPE html>
<html>
<head>
<style>
h1::after {
content: " Coddykit";
}
</style>
</head>
<body>
<h1>Hello</h1>
<h1>Hello</h1>
<h1>Hello</h1>
</body>
</html>Lista de pseudoclasses
Aprendemos as pseudoclasses mais usadas. No entanto, existem dezenas de outras.
Você pode acessar a lista de todas as pseudoclasses pelo link abaixo. Use qualquer uma delas sempre que precisar.
Parabéns
Parabéns 🎉
Nesta seção, aprendemos os tipos de seletores.
Na próxima seção, aprenderemos as propriedades CSS mais usadas
Perguntas Frequentes
A aula “Tipos de seletores” é grátis?
Sim — o texto completo de “Tipos de seletores” é 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 HTML for Kids, atualize para CoddyKit PRO. O curso de HTML for Kids inclui 1 aulas no total.
O que vou aprender em “Tipos de seletores”?
Tipos de seletores Você pratica HTML for Kids 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 HTML for Kids?
Nenhuma experiência prévia é necessária. HTML for Kids 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 1 de 1.
Quanto tempo leva a aula “Tipos de seletores”?
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 HTML for Kids?
Sim. Cada aula de HTML for Kids 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.