Whether or not to inform "div" in CSS


Should I or should I not inform the div in the CSS? Example:

.teste {blablabla}
div.teste {blablabla}


<div class="teste">teste</div>

I never inform, just that I was looking at the code of a site which he was informed.


Whether or not to specify div as a class prefix in css depends on the type of element you want the rule to be applied to, as a css rule can work in the following ways:

div { blabla } //aplica a todas as div's do documento.
span { blabla } //aplica a todos os span do documento.
.teste { blabla } //aplica a todos os elementos que tiverem classe .teste
div.teste { blabla } //aplica APENAS AS DIVS que contem a classe .teste
span.teste { blabla } //aplica APENAS OS SPANS que contem a classe .teste

Therefore, even if the rule is named as the .teste class, it will only apply to all elements that contain the .teste class if there is no type specification beforehand, as for example div.teste there would be all the divs that contain the class .teste and not all elements

Elements are all types of existing html elements.

Divs are all <div> tags that exist in your html.

Important note:

Do not confuse div .teste with div.teste because they are very different things as shown below:

div .teste { blabla } //aplica a todos os elementos que conterem classe .teste que forem filhos de uma DIV
div.teste { blabla } //aplica a todas as divs que conterem a classe .teste

When you give a space in the rule name, you are saying that the next element will be a child of the first element (the one on the left)

Usage Examples:

div div {
  margin: 10px; /* apenas para dar um espaço */  

div, span {
  width:   150px; /* apenas para dar forma aos elementos */
  height:  50px;  /* apenas para dar forma aos elementos */
  margin:  10px;  /* apenas para dar um certo espaço */
  display: block; /* apenas para dar forma aos elementos */
  background-color: cyan;

.teste {
  background-color: blue;

div.teste {
  background-color: yellow;

span.teste {
  background-color: red;

div .teste {
  background-color: green;

.teste div {
  background-color: black;
  color: #fff;

.teste span {
  background-color: orange;  
<div class=teste>div.teste</div>

<span class=teste>span.teste</span>

  <div class=teste>div .teste</div>

  <span class=teste>div .teste</span>

<div class=teste>
  <div>.teste div</div>

<div class=teste>
  <span>.teste span</span>
Scroll to Top