O que um espaço significa em um seletor CSS? ou seja, qual é a diferença entre .classA.classB e .classA .classB?

104

Qual é a diferença entre esses dois seletores?

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

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

css css-selectors

— Quentin
fonte

104

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

Editar: Especificação para referência: Seletores de atributo (consulte a seção 5.8.3 Seletores de classe)

— Williham Totland
fonte

43

Um estilo como esse é muito mais comum e teria como alvo qualquer tipo de elemento da classe "classB" que esteja aninhado dentro de qualquer tipo de elemento da classe "classA".

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

Funcionaria, por exemplo, em:

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

Este, entretanto, visa qualquer tipo de elemento que seja tanto da classe "classA" quanto da classe "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:

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

No entanto, não teria efeito sobre o seguinte:

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

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

1

Mostrar o caso com falha é útil.

— Hal50000,

-1

.classA.classBsignifica que os elementos com o nome de ambas as classes serão selecionados, ao passo .classA .classBque significa que o elemento com o nome da classe classBdentro de classAserá selecionado apenas.

— Amarnath Vishwakarma
fonte

2

Isso é correto, mas a pergunta já foi respondida corretamente há uma década; realmente não precisava de uma nova resposta.

— Brilliand