Que signifie un espace dans un sélecteur CSS? ie Quelle est la différence entre .classA.classB et .classA .classB?

Quelle est la différence entre ces deux sélecteurs?

.classA.classB {
  border: 1px solid;
}

.classA .classB {
  border: 1px solid;
}

.classA.classBfait référence à un élément qui a les deux classes A et B ( class="classA classB"); alors que .classA .classBfait référence à un élément avec class="classB"descendant d'un élément avec class="classA".

Edit: Spec pour référence: Attribute Selectors (See section 5.8.3 Class Selectors)

Un style comme celui-ci est beaucoup plus courant et ciblerait tout type d'élément de la classe "classB" qui est imbriqué dans tout type d'élément de la classe "classA".

.classA .classB {
  border: 1px solid; }

Cela fonctionnerait, par exemple, sur:

<div class="classA">
  <p class="classB">asdf</p>
</div>

Celui-ci, cependant, cible tout type d'élément qui est à la fois la classe "classA", ainsi que la classe "classB". Ce type de style est moins fréquent, mais reste utile dans certaines circonstances.

.classA.classB {
  border: 1px solid; }

Cela s'appliquerait à cet exemple:

<p class="classA classB">asdf</p>

Cependant, cela n'aurait aucun effet sur les éléments suivants:

<p class="classA">fail</p>
<p class="classB">fail</p>

(Notez que lorsqu'un élément HTML a plusieurs classes, elles sont séparées par des espaces.)

.classA.classBcela signifie que les éléments avec le nom des deux classes seront sélectionnés alors que cela .classA .classBsignifie que l'élément avec le nom de classe classBà l'intérieur du classAsera uniquement sélectionné.