Selecionando elementos por múltiplas classes em CSS
Se quisermos, podemos selecionar um elemento que possui duas classes simultaneamente, sem afetar os elementos com apenas uma dessas classes.
Vamos ver um exemplo. Suponha que temos o seguinte código:
<p class="eee">
This is a paragraph with text.
</p>
<p class="zzz">
This is a paragraph with text.
</p>
<p class="eee zzz">
This is a paragraph with text.
</p>
Como você pode ver, o primeiro parágrafo tem a classe eee,
o segundo parágrafo - a classe zzz, e o terceiro
parágrafo - ambas as classes simultaneamente.
Vamos selecionar o último parágrafo sem afetar os outros. Para isso, escrevemos o nome de uma classe e o nome da segunda classe juntos, sem espaço:
.eee.zzz {
color: red;
}
Selecione o elemento que tem as classes
eee, zzz e ccc simultaneamente:
<p class="eee">
This is a paragraph with text.
</p>
<p class="zzz">
This is a paragraph with text.
</p>
<p class="ccc">
This is a paragraph with text.
</p>
<p class="eee zzz ccc">
This is a paragraph with text.
</p>