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 :

html<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 :

css.eee.zzz {
  color: red;
}

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