Que signifie un espace dans un sélecteur CSS ? Par exemple, quelle est la différence entre .classA.classB et .classA .classB ?

Question

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

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

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

Answer 1

.classA.classB fait référence à un élément qui possède à la fois les classes A et B ( class="classA classB" ) ; considérant que .classA .classB fait référence à un élément avec class="classB" descendant d'un élément avec class="classA" .

Edit : Spec pour référence : Sélecteurs d'attributs (Voir section 5.8.3 Sélecteurs de classe)

Answer 2

Un style comme celui-ci est beaucoup plus courant et vise 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; }

Il 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 de la classe "classA" et de la classe "classB". Ce type de style est moins fréquent, mais reste utile dans certaines circonstances.

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

Cela s'applique à cet exemple :

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

Toutefois, elle 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 possède plusieurs classes, elles sont séparées par des espaces).

Answer 3

.classA.classB cela signifie que les éléments avec les deux noms de classes seront sélectionnés alors que .classA .classB signifie que l'élément avec le nom de classe classB à l'intérieur de la classA sera uniquement sélectionné.