CSS Diferença entre seletor.classe e .classe seletor

laripereira14 · 4 de março de 2019

Olá, pessoal. Sou iniciante em programação e estou com uma dúvida em CSS. Em um código onde quero que todos os H5 que possuam a classe .special sejam vermelhos, há alguma diferença entre h5.special e .special h5? Usando h5.special, consegui o que queria, mas usando .special h5, não obtive o mesmo resultado. Por que? Quando devo utilizar o seletor após a classe e o inverso?

HTML:

<html>
<head>
<link rel="stylesheet" type ="text/css" href="style.css"/>
</head>
<body>
<h5 class="special"> Destino </h5>
<br> texto texto texto texto texto texto <br>
<br> texto texto texto texto texto texto <br>

<h5>Destino </h5>
<br> texto texto texto texto texto texto <br>
<br> texto texto texto texto texto texto <br>

<h5 class="special"> Destino</h5>
<br> texto texto texto texto texto texto <br>
<br> texto texto texto texto texto texto <br>
</body>
</html>

CSS:

h5.special {
color: red;
}

Agradeço desde já.

Renan Leite BL · 5 de março de 2019

h5.special => busca todos os h5 que tem a classe special.
.special h5 => busca em todas as classes .special os h5...

Um exemplo em que o .special h5 funcionaria.

<div class="special">
  <h5>Special</h5>
  <h5>Outro h5</h5>
</div>

Ele encontra uma classe .special e encontra os h5, logo ele consegue estilizar

DiF · 5 de março de 2019

@laripereira14 Olá, seja bem vindo em nosso Clube do Hardware.

Então, basicamente para que a regra de classe seguido do seletor funcione, a classe deve ser posta em um elemento pai.

Exemplo:

<html>
<head>
<link rel="stylesheet" type ="text/css" href="style.css"/>
</head>
<body>
<h5 class="special"> Destino </h5>
<br> texto texto texto texto texto texto <br>
<br> texto texto texto texto texto texto <br>

<h5>Destino </h5>
<br> texto texto texto texto texto texto <br>
<br> texto texto texto texto texto texto <br>

<h5 class="special"> Destino</h5>
<br> texto texto texto texto texto texto <br>
<br> texto texto texto texto texto texto <br>
  
  
<div class="special">
 	<h5> Destino</h5>
	<br> texto texto texto texto texto texto <br>
	<br> texto texto texto texto texto texto <br>

	<h5> Destino</h5>
	<br> texto texto texto texto texto texto <br>
	<br> texto texto texto texto texto texto <br>

	<h5> Destino</h5>
	<br> texto texto texto texto texto texto <br>
	<br> texto texto texto texto texto texto <br> 
</div>
  
  
</body>
</html>

h5.special {
color: red;
}

.special h5{
  color: blue;
}

Exemplo online: https://jsfiddle.net/dife/s72t3g6j/3/

Adriano_web · 5 de março de 2019

Olá @laripereira14 a diferença é que h5.special significa que o elemento <h5> está com um atributo class com o valor "special", ou seja <h5 class="special">. E .special h5 é uma seleção de um elemento que tem a class com o valor igual a "special" e que contém um elemento filho de título <h5> no caso. Então seria: <div class="special"><h5>título5</h5></div>.

<!-- H5 com a class igual a special -->

<h5 class="special">My Title</h5>
<!-- 
  acessado no css com a segunte syntax:
  .special {
    color: red;
  }
-->

<!-- Elemento "pai" do h5 ocm a class igual a special -->

<div class="special">
  <h5>My Title</h5>
</div>
<!-- 
  acessado no css com a segunte syntax:
  .special h5 {
    color: red;
  }

  ou para maior especificidade:

  div.special h5 {
    color: red;
  }
-->