Apply CSS when two classes are together

Question

How to apply a CSS setup only when a tag is with the classes nome1 and Nome2 at the same time?

I tried with the following code, but it’s not working. Does anyone know how to do?

.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>

Answer 1

The original code is almost right. What makes the difference is that when you have a space in the style setting of CSS (.nome1 .nome2) is defining that the style will be applied to the class nome1 And nome2. You can define a rule using more than one attribute just by removing the spaces between the settings (.nome1.nome2). The result is as follows:

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

---

References:

• CSS Rule to apply only if element has BOTH classes;
• Defining A CSS Selector That Requires A Multi-class Union

Answer 2

You almost got the answer.. instead of declaring the two classes separately (.nome1 .nome2), join them in the css statement:

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

Answer 3

When you put .nome1 .nome2, is actually saying it will be applied to the children of nome1 who are nome2

.nome1.nome2 is the right thing to do