Que signifie un espace dans un sélecteur CSS? c'est-à-dire 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 se réfère à un élément qui possède à la fois les classes A et B (class="classA classB"); tandis que .classA .classB fait référence à un élément avec class="classB" issu d'un élément avec class="classA".

Edit: Spec pour référence: Attribute Selectors (Voir la section 5.8.3 Classe Selectors)

Answer 2

Un style comme celui-ci est beaucoup plus fréquent, et ciblerait tout type d'élément de classe « ClassB » qui est imbriqué dans tout type d'élément de classe "classA".

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

Il travaillerait, par exemple, sur:

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

Celui-ci, toutefois, les objectifs tout type d'élément qui est à la fois classe "CLASSA", ainsi que la classe "ClassB". Ce type de style est moins souvent vu, mais toujours utile dans certaines circonstances.

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

Cela s'appliquerait à cet exemple:

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

Cependant, il n'a pas d'effet sur les points suivants:

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

(Notez que lorsqu'un élément HTML possède plusieurs classes, ils sont séparés par des espaces.)