No, in reality it implements in all the elements of the page the applied style, that is, the html element gains edge, the body gains edge, and the divs also gain edges, but it has low priority. See:
* {
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 border:
* {
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 on
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>
- style.css
footer div .copy{
color: #ffffff;
}
Only the color of the first text would be white, now if both 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>
- style.css
footer div p.copy{
color: #ffffff;
}
footer div h1.copy{
color: #000000;
}
In this example, <p> elements with class .copy would be white, while elements of the <h1> tag 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 parent and child relationship:
This type of relationship between elements is to specify tags that have parent-child relationships:
- index.html
<main>
<header>
<p class="tipo">Texto</p>
<header>
<p class="tipo">Texto 1</p>
</main>
- style.css
main > p.tipo{
color: #ffffff;
}
main p.tipo{
Color: red;
}
In this case, only the paragraph with the content "Text 1" will be white, the paragraph inside the <header> tag will not go white, since its relationship with the <main> tag is not direct in this case, we would have to do it as follows:
- style.css
main > p.tipo{
color: #ffffff;
}
main > header > p.tipo{
color: red;
}
Or
header > p.tipo{
color: red;
}
The text would be red now because our paragraph has a direct relationship with the tag <header> which in turn has a direct relationship with the tag <main> .
Selectors priority:
The more you specify the selectors, the higher is their priority.
- index.html
<footer>
<p class="texto-footer">Fim do Footer</p>
<div>
<p>Teste</p>
<h1>Texto</h1>
</div>
</footer>
- style.html
footer p.texto-footer{
color:red;
}
.texto-footer{
color:aqua;
}
Even the class coming later, the color of the text will still be red, as it is more specific, using tags and the class, just the class.
We also have the case of the selectors of the types tags, classes and id, that each one of them has a type of priority. For example:
- index.html
<div>
<p>Teste</p>
<p class="teste">Teste</p>
<p class="teste" id="teste2">Teste</p>
</div>
- style.css
#teste2{
color:salmon;
}
p{
color:springgreen;
}
.teste{
color:slateblue;
}
Notice that we even create a color for each selector, a color for the selector tag <p> , one for the class .teste and another for the #teste2 id, and if you noticed that the last paragraph has all the three selectors, but it was salmon in color. This occurs because of the priority that the selectors have, ie my id selector has more priority than my selector class, which in turn has more priority than the selector tag.
