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
