3

Eu não sei se isso vale para todos, mas o único elemento o qual estou interessado é a <div>. Por exemplo:

div.classe1 { /*...*/ }

.clase1 { /*...*/ }

Qual a diferença entre os dois exemplos? Eu consigo fazer as mesmas coisas com os dois casos.

2 Respostas 2

10

A diferença é que no primeiro caso, você só selecionará as divs que contenham a classe classe1, diferentemente do segundo exemplo, que selecionará qualquer elemento com a classe classe1.

Um breve exemplo:

.exemplo1 {
  color: red;
}

div.exemplo2 {
  color: blue;
}
<span class="exemplo1">Sou um &lt;span&gt; com a classe `exemplo1`;</span>
<div class="exemplo1">Sou uma &lt;div&gt; com a classe `exemplo1`;</div>
<span class="exemplo2">Sou um &lt;span&gt; com a classe `exemplo2`;</span>
<div class="exemplo2">Sou uma &lt;div&gt; com a classe `exemplo2`;</div>

Como você pode ver acima, quando não temos um seletor de elemento precedendo a classe, todos os elementos são selecionados. Isso já não acontece no segundo caso (exemplo2), em que somente as divs são selecionadas.

Para um aprofundamento maior:

4

Se existir outros elementos que não sejam uma div com a mesma classe, ao usar a informação div.classe1{}, a classe será aplicada apenas ao elemento que seja uma div, e não será aplicada a outros elementos (p, span, por exemplo).

Eu, particularmente, prefiro usar div.classe1{}, pois ao ver o código do CSS, eu consigo perceber mais rapidamente que aquela classe está sendo aplicada em um ou mais elementos que sejam uma div.

Em casos onde o CSS vá crescendo muito com várias classes, acredito ser melhor. Se você for utilizar essa classe em apenas uma div, seria melhor criar um id para a div, e utilizar a regra apenas para ela, assim:

No HTML:

<div id="minhadiv">Teste</div>

No CSS:

#minhadiv { .... }

Dessa forma você aplica a regra diretamente à div específica com esse id.

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 .