Sélection d'un élément par plusieurs classes en CSS
Si nous le souhaitons, nous pouvons sélectionner un élément ayant simultanément deux classes, sans affecter les éléments ayant une seule de ces classes.
Regardons un exemple. Supposons que nous ayons le code suivant :
<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>
Comme vous pouvez le voir, le premier paragraphe a la classe eee,
le deuxième paragraphe - la classe zzz, et le troisième
paragraphe - simultanément ces deux classes.
Sélectionnons le dernier paragraphe, sans affecter les autres. Pour ce faire, écrivons de manière compacte, sans espace, le nom d'une classe et le nom de la deuxième classe :
.eee.zzz {
color: red;
}
Sélectionnez l'élément ayant simultanément les classes
eee, zzz et ccc :
<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>