Whether or not to "div" in the CSS

Question

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

.teste {blablabla}
div.teste {blablabla}

HTML:

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

I never inform, only that I was seeing the code of a site which he was informed.

Answer 1

Inform or not div as a class prefix, in css, it depends on the type of element you want the rule to be applied to, because 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

So even if the rule is named as the class .teste will only apply to all elements containing the class .teste if there is no type specification before, for example div.teste there would be all the Divs which contains the class .teste and not all elements

Elements are all types of existing html elements.

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

Important remark:

Don’t confuse div .teste with div.teste for are very different things as an example 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 the child of the first element (the one on the left)

Examples of Use:

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>
  <div class=teste>div .teste</div>
</div>

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

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

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