6

Como aplicar uma configuracao de CSS apenas quando uma tag estiver com as classes nome1 e nome2 ao mesmo tempo?

Eu tentei com o seguinte código, mas não está funcionando. Alguém sabe como fazer?

.nome1 {
  color: black;
}

.nome2 {
  color: blue;
}

.nome3 {
  color: green;
}

.nome1 .nome2 {
  color: red;
  font-size: 18pt;
}
<div class="nome1">
  Nome1
</div>
<div class="nome2">
  Nome2
</div>
<div class="nome3">
  Nome3
</div>
<div class="nome1 nome2">
  Nome1 e Nome2
</div>

1

3 Respostas 3

12

O código original está quase certo. O que faz a diferença é que quando tem um espaço na definição do estilo do CSS (.nome1 .nome2) está definindo que o estilo será aplicado para a classe nome1 E nome2. Você pode definir uma regra usando mais de um atributo apenas removendo os espaços entre as definições (.nome1.nome2). O resultado é o seguinte:

.nome1.nome2 {
  color: red;
  font-size: 18pt;
}

Referências:

0
3

Você chegou quase na resposta.. ao invés de declarar as duas classes de forma separada (.nome1 .nome2), junta elas na declaração no css:

.nome1.nome2 {
  color: red;
  font-size: 18pt;
}
-2

Quando você coloca .nome1 .nome2, na verdade está dizendo que vai ser aplicado nos filhos de nome1 que são nome2

.nome1.nome2 é o certo

1
  • Depois de quase 4 anos esperava ver uma resposta diferente das outras... Commented 14/08/2020 às 14:39

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .