Inform or not "div" in CSS

6

Should I report the div in CSS? Example:

.teste {blablabla}
div.teste {blablabla}

HTML:

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

I never reported, but I was seeing the code of a site that he was informed of.

    
asked by anonymous 08.12.2014 / 16:44

1 answer

8

Inform or not

as a prefix of a class, in css, depends on the type of element you want the rule to be applied for, since a css rule can 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 .teste class it will only apply to all elements that contain the .teste class if there is no type specification before, such as div.teste there would be all divs that contains 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 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 name of the rule, 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>
    
08.12.2014 / 16:51