Aplicar CSS quando duas classes estiverem juntas
Neste artigo vamos aprender como aplicar CSS quando duas classes estiverem juntas, assim poderemos ativar determinados estilos apenas se essa condição ocorrer.
Fala programador(a), beleza? Bora aprender a ativar alguma regra do CSS, apenas se o elemento possuir duas classes!
Essa técnica é bem simples e muito utilizada
Quando vamos colocar adicionar estilo a alguma classe no CSS, apenas utilizamos .nomeDaClasse
Agora quando temos este desafio de estilo apenas com duas classes, basta juntar o nome das classes, deste jeito: .primeiraClasse.segundaClasse
Assim, ativaremos o estilo apenas se o elemento possuir as duas classes mencionadas
Vamos ver um exemplo prático:
<!DOCTYPE html>
<html>
<head>
<title>Aplicar CSS quando duas classes estiverem juntas </title>
<meta charset="utf-8">
</head>
<body>
<p class="nome">Matheus Budkewicz Battisti</p>
<p class="nome negrito">Matheus Budkewicz Battisti</p>
</body>
</html>
Aqui nesta estrutura HTML adicionamos dois parágrafos, um contém a classe nome e o outro nome e negrito
Vejamos agora o CSS utilizando duas classes:
.nome.negrito {
font-weight: bold;
}
Vamos deixar em negrito, apenas o parágrafo que contem as classes nome e negrito
Veja o resultado:
Veja que o resultado foi obtido com sucesso, alteramos o estilo apenas no elemento com duas classes
Além disso, o seletor com duas classes é mais específico que o seletor com uma
Quer se especializar em Desenvolvimento Web? Veja o nosso catálogo de cursos.
Ou seja, podemos sobrescrever qualquer estilo da primeira classe no segundo elemento unindo as classes
Veja um exemplo:
.nome {
color: red;
}
.nome.negrito {
font-weight: bold;
color: blue;
}
Mudamos a cor quando o elemento combinar as classes, veja:
Conclusão
Neste artigo vimos como aplicar CSS quando duas classes estiverem juntas
E isso é muito simples, apenas precisamos criar um seletor com as duas juntas, deste jeito: .classeUm.classeDois
E aí todos os estilos desta regra só serão aplicado, caso o elemento possua as duas classes determinadas
Confira também nosso catálogo de cursos gratuitos, com aulas semanais no YouTube
Formações
Formação Vibe Coding
Do Prompt ao Produto: Crie Software Real com IA
- 473 aulas
- 20 projetos
- 39h 26min
Blog | Mais populares
Como usar o Antigravity do Google: guia completo do zero ao primeiro app
Aprenda neste guia prático como usar o Antigravity do Google: descubra a instalação, configuração, criação de projetos com o Agent Manager e o primeiro deploy, […]
Melhor curso de agentes de IA: Conheça a Formação da Hora de Codar
Descubra o melhor curso de agentes de IA do mercado: confira a Formação Agentes de IA Hora de Codar e outras opções para impulsionar sua […]
Checklist de segurança n8n VPS pública: práticas essenciais para proteger seu servidor
Confira o checklist de segurança n8n VPS pública e saiba como proteger seu servidor seguindo práticas essenciais. Rodar o n8n em uma VPS pública traz […]
