Seletor de classe
Seletor de classe
Seletor de classe é 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.
Por que usar seletores de classe
Olá,
Chegamos aos seletores de classe, um dos assuntos mais importantes em CSS.
Conhecemos o seletor de classe porque o usamos com frequência até agora.
Nesta lição, vamos consolidar nosso conhecimento e aprender sobre suas vantagens em relação a outros seletores.
Sintaxe do seletor de classe
Então, vamos começar.
Usamos o seletor de ponto (.) para definir um seletor do tipo classe. Abaixo, há um seletor de classe chamado my-class ao qual foi atribuído o estilo font-size: 10px.
.my-class {
font-size: 10px;
}
Também podemos definir mais de um estilo para um seletor de classe.
.my-class {
font-size: 10px;
}
Seletor múltiplo
Podemos atribuir mais de uma classe ao mesmo elemento.
No exemplo abaixo, são definidos dois seletores de classe chamados el1 e el2.
Duas ou mais classes podem ser adicionadas ao atributo class do elemento criado com a tag p, deixando um espaço entre elas.
Você pode ver que os estilos das duas classes são aplicados simultaneamente ao elemento na seção de visualização.
<style>
.el1{
color:red;
}
.el2{
font-size:30px;
}
</style>
<p class="el1 el2">
Hello Class Selector
</p>Então, por que devemos escolher o seletor de classe em vez do seletor de tag e de ID?
Então, por que devemos escolher o seletor de classe em vez do seletor de tag e de ID?
Quando usamos o seletor de tag, isso pode gerar resultados indesejados, pois ele afeta todos os elementos criados com essa tag. Portanto, geralmente usamos essas tags quando existe uma característica comum que todos os elementos devem ter.
Por exemplo, se quisermos que a família de fontes de cada elemento seja 'Lato', fazemos uma definição da seguinte forma.
a{
font-family: Lato,sans-serif
}Então, por que devemos escolher o seletor de classe em vez do seletor de tag e de ID? 2
Podemos criar uma definição específica para um elemento com o seletor de ID.
No entanto, como todas as nossas definições de estilo são válidas para apenas um elemento, tivemos de reescrever os códigos para outro elemento no qual queríamos exibir as mesmas propriedades.
Isso ocorre porque só pode haver um elemento em um documento HTML com o mesmo ID.
Especificidade do CSS
Agora vamos aprender o conceito de especificidade do CSS.
Vamos criar um problema novamente para entender melhor o assunto e aprenderemos esse conceito enquanto o resolvemos.
Especificidade do CSS 2
No exemplo abaixo,
Foi feita uma definição de estilo para a tag p.
Foi feita uma definição de estilo com um seletor de classe chamado .first.
Ambos os seletores escolheram o mesmo elemento em nosso documento HTML.
Ambos os seletores definiram estilos para substituir a mesma propriedade de cor. Nesse caso, haverá um conflito.
<style>
.first{
color:blue;
}
p{
color:red;
}
</style>
<p class="first">
Enroll Now And Start Learn Codding?
</p>
Especificidade do CSS 3
Ao observarmos o exemplo, podemos pensar que a cor será vermelha com base em nosso conhecimento anterior.
Isso ocorre porque o conceito de cascata nos diz que o último trecho na ordem do código vencerá.
No entanto, há uma pequena nuance. Se eles tiverem a mesma especificidade, vencerá o último código inserido.
Trata-se de uma avaliação que mostra a importância da especificidade do seletor no elemento ou nos elementos relevantes.
Independentemente de sua posição no código, o seletor com alto grau de especificidade será avaliado pelo navegador.
Aviso
O seletor de classe é uma definição mais específica do que o seletor de elemento. Portanto, seu grau de especificidade é maior.
Especificidade dos seletores
Descobrir qual seletor é mais específico é, na verdade, muito simples.
Como há apenas um ID atribuído a um elemento e apenas um em uma página da web, esperamos que ele seja o seletor de maior prioridade.
Os seletores de classe, por outro lado, podem ser avaliados como mais específicos do que os seletores de tag, pois escolhem um grupo mais específico do que a tag.
Veremos que o seletor de ID vence no exemplo abaixo, ao selecionar o mesmo elemento com 3 seletores diferentes.
<style>
#first{
color:green;
}
.first{
color:blue;
}
p{
color:red;
}
</style>
<p class="first" id="first">
Enroll Now And Start Learn Codding?
</p>Ferramenta de cálculo de especificidade
Você pode acessar a calculadora de especificidade on-line por meio deste link.
Quando a especificidade é importante
Então, preciso usar esses cálculos o tempo todo?
É claro que não. Não ocorrerão conflitos quando escrevermos nossos códigos de acordo com os padrões.
Portanto, você não precisa fazer cálculos matemáticos o tempo todo, mas, quando houver um problema, talvez precise dessas informações para resolvê-lo.
Parabéns
Parabéns. 🥳🥳🥳
Você concluiu a lição Seletor de classe e especificidade do CSS.
Na próxima seção, aprenderemos os tipos de seletores.
Você pode clicar para continuar na próxima seção.
Perguntas Frequentes
A aula “Seletor de classe” é grátis?
Sim — o texto completo de “Seletor de classe” é 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 “Seletor de classe”?
Seletor de classe 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 “Seletor de classe”?
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.