How to apply a CSS configuration only when a tag has the name1 and name2 classes at the same time?
I tried with the following code, but it is not working. Does anyone know how to do it?
.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> The original code is almost right. What makes the difference is that when you have a space in the style definition of CSS ( .nome1 .nome2 ) you are setting the style to be applied to the nome1 E nome2 class. You can define a rule using more than one attribute only by removing the spaces between the definitions ( .nome1.nome2 ). The result is as follows:
.nome1.nome2 {
color: red;
font-size: 18pt;
}
References:
You've almost come up with the answer .. instead of declaring the two classes separately ( .nome1 .nome2 ), put them together in the statement in css:
.nome1.nome2 {
color: red;
font-size: 18pt;
}