No, in reality it implements in all elements of the page the style applied, that is, the html element gains edge, the body gains edge, and the Divs also gain edges, but has low priority. Behold:
* {
border:3px solid #000000;
}
div {
border:3px solid #e7a500;
}
<!DOCTYPE html>
<html>
<head>
<title>Teste</title>
</head>
<body>
<div>Testando div</div>
<div>Testando div</div>
</body>
</html>
Now without overlapping the edge:
* {
border:3px solid #000000;
}
div {
color: #e7a500;
}
<!DOCTYPE html>
<html>
<head>
<title>Teste</title>
</head>
<body>
<div>Testando div</div>
<div>Testando div</div>
</body>
</html>
More about
Relationship between selectors:
To style an element that is within specific tags:
--index.html
<footer>
<div>
<p class="copy">Texto</p>
<p>Texto 1</p>
</div>
</footer>
--css style.
footer div .copy{
color: #ffffff;
}
Only the color of the first text would be white, now if the two elements used the same class but we want to use different colors for each element:
--index.html
<footer>
<div>
<p class="copy">Texto</p>
<h1 class="copy">Texto 1</h1>
</div>
</footer>
--css style.
footer div p.copy{
color: #ffffff;
}
footer div h1.copy{
color: #000000;
}
In this example, the elements <p> with class .copy would be white, while tag elements <h1> would be black even using the same class. Note that the tag is stuck with the class name in the style.css file, if they are separated, it will not work.
Selector with father and son relationship:
This type of relationship between the elements are to specify tags that have parent-child relationship:
--index.html
<main>
<header>
<p class="tipo">Texto</p>
<header>
<p class="tipo">Texto 1</p>
</main>
--css style.
main > p.tipo{
color: #ffffff;
}
main p.tipo{
Color: red;
}
In this case, only the paragraph with the content "Text 1" will turn white, the paragraph inside the tag <header> won’t turn white because his relationship with the tag <main> is not direct, in this case we would have to do as follows:
--css style.
main > p.tipo{
color: #ffffff;
}
main > header > p.tipo{
color: red;
}
Or
header > p.tipo{
color: red;
}
The text would look red now because our paragraph has a direct relationship with the tag <header> who in turn has direct relationship with the tag <main>.
Selector priority:
The more specified the selectors, the higher their priority.
-- index.html
<footer>
<p class="texto-footer">Fim do Footer</p>
<div>
<p>Teste</p>
<h1>Texto</h1>
</div>
</footer>
-- html style.
footer p.texto-footer{
color:red;
}
.texto-footer{
color:aqua;
}
Even if the class comes later, the color of the text will still be red, because it is more specific, using tags and the class, than only the class.
We also have the case of selectors of tag types, classes and id, that each of them has a priority type. For example:
-- index.html
<div>
<p>Teste</p>
<p class="teste">Teste</p>
<p class="teste" id="teste2">Teste</p>
</div>
-- css style.
#teste2{
color:salmon;
}
p{
color:springgreen;
}
.teste{
color:slateblue;
}
Note that we even create a color for each selector, a color for the selector tag <p>, one for the class .teste and another for id #teste2, And if you noticed that the last paragraph has all three selectors, but it’s the color Salmon. This is due to the priority that the selectors have, ie my id selector has more priority than my class selector, which in turn has more priority than the tag selector.
Cara probably has some hierarchy css conflict in his code. Or you’re using the class in * with ! important, or is using ID to place class, or something like that. The universal selector * has no class priority, unless you declare no class for the other elements that accept background
– hugocsl