O que significa um espaço em um seletor de CSS? ie Qual é a diferença entre .classA.classB e .classA .classB?

Qual é a diferença entre esses dois seletores?

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

.classA.classB refere-se a um elemento que possui as classs A e B ( class="classA classB" ); enquanto .classA .classB refere-se a um elemento com class="classB" descendente de um elemento com class="classA" .

Edit: Spec para referência: Seletores de Atributo (Veja a seção 5.8.3 Seletores de Classe)

Um estilo como esse é muito mais comum e teria como alvo qualquer tipo de elemento da class “classB” que estivesse nested dentro de qualquer tipo de elemento da class “classA”.

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

Funcionaria, por exemplo, em:

 

asdf

Este, no entanto, tem como alvo qualquer tipo de elemento que seja da class “classA”, assim como da class “classB”. Esse tipo de estilo é visto com menos frequência, mas ainda é útil em algumas circunstâncias.

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

Isso se aplica a este exemplo:

 

asdf

No entanto, isso não afetaria o seguinte:

 

fail

fail

(Observe que quando um elemento HTML tem várias classs, elas são separadas por espaços).