Qual é a diferença entre esses dois seletores?
.classA.classB {
border: 1px solid;
}
.classA .classB {
border: 1px solid;
}
fonte
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 classes A e B ( class="classA classB"
); enquanto .classA .classB
se 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)
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.)
.classA.classB
significa que os elementos com o nome de ambas as classes serão selecionados, ao passo.classA .classB
que significa que o elemento com o nome da classeclassB
dentro declassA
será selecionado apenas.fonte