5

Eu estava desenvolvendo e uma coisa me chamou bastante a atenção: a regra elemento .classe é diferente de elemento.classe.

Percebi que a principal diferença é que a primeira poderia ser lida assim: "Elemento que tenha um filho com a classe classe" e a segunda: "Elemento que contenha a classe classe". Gostaria de explicações sobre essa segunda, é isso mesmo?

1 Resposta 1

7

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:

2
  • 1
    Excelente resposta, tirou todas as dúvidas que tinha, obrigado :) Commented 11/04/2015 às 21:15
  • Obrigado @RafaelAlmeida!
    – Syzoth
    Commented 11/04/2015 às 23:46

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .