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, just that I was looking at the code of a site which he was informed.
Answer:
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>
<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>