Em uma breve explicação;
O elemento .classe
equivale há elemento *.classe
, o vazio é uso "abreviado" do asterisco *
, que serve para aplicar CSS a todos elementos, por exemplo:
* {}
aplica estilo a qualquer elemento html da página
html > *
aplica aos elementos filhos de <html>
, por exemplo <head>
e <body>
, não afetas os "netos"
*.exemplo
ou .exemplo
afetam todos elementos que possuírem o atributo class
com o valor exemplo
separado por espaço de outro, por exemplo:
<div class="test exemplo abc"></div>
div *.exemplo
irá afetar qualquer elemento dentro de uma <div>
que possuir a classe:
<div>
<span class="test exemplo">test</span>
</div>
<div>
<p>
<span class="test exemplo">test</span>
</p>
</div>
Já o elemento.classe
é parecido com o anterior, mas com um elemento especifico:
Por exemplo, span.test
, irá afetar apenas os spans:
div span.exemplo {
color: red;
}
<div>
<p>
<span class="test exemplo">Será afetado</span><br>
<strong class="test exemplo">Não será afetado</strong><br>
<sub class="test exemplo">Não será afetado</sub><br>
<span class="test exemplo">Será afetado</span>
</p>
</div>
Negando alguns elementos
Se você quiser que qualquer elemento use uma regra CSS, menos o sub
por exemplo, você pode usar o :not()
, por exemplo:
#main *.test:not(sub) {
color: red;
}
<div id="main">
<p>
<span class="test exemplo">Será afetado</span><br>
<strong class="test exemplo">Será afetado</strong><br>
<sub class="test exemplo">Não erá afetado</sub><br>
</p>
</div>
Leia mais em: