What is the difference betweeen specifying “a” and taking whole class/container?
Question
Okay so I've been making website for my mom's business and stumbled onto an interesting thing I can't really find difference on, right now, since website is still in early development.(tried googling but no help)
So basically my question is:
What is the difference in css(and html) between;
container a:hover;
and
container:hover;
I mean it shouldn't be any different. In both cases, as long as there is only <a></a> type used like here, it will apply to everything:
<a href="index.html">#name of the button</a>
The thing is here:
.nav-link-wrapper:hover {
border-bottom: 1px solid black;
}
.nav-link-wrapper a:hover {
color:black;
}
Why do I have to specify a that is within the class, to apply color, when I don't have to for manipulating borders.
Sry if it was asked. This is more of a beginner's question and I can't find anybody who already asked this.
2 answers
solution1
0 ACCPTED 2021-01-23 12:10:08
If you set color in .nav-link-wrapper:hover , it will not affect since a tag has its own style. So in order to add style for that a tag, you will need to specify a .
solution2
0 2021-01-23 12:25:40
If you see why you have to explicitly use a color property for your a tag is because of the Browser specific color property being applied on it. color and text-decoration is applied to it explicitly as shown in the image snippet below:-)
And that is true only with color property not with any other property. In the code snippet below I am setting font-size for the body and it is applied on the a tag.
body{ color:orange; /* Parent Not applied */ font-size:2rem; /* Applied to Child*/ }
<body> <a href="/">Test Link</a> </body>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.