Menu
I'm wondering what is the difference between CSS selectors. If I'm changing this:
.parent *:hover {}
to this:
.parent:hover * {}
in the subsequent code:
#child {
width: 100%;
height: 100%;
}
.parent {
background-color: green;
width: 100px;
height: 100px;
}
.parent:hover * {
background-color: red;
}<html>
<head>
<title>HTML Sample</title>
</head>
<body>
<div class="parent">
<div id="child"></div>
</div>
</body>
</html>Nothing changes and hover effect remains same. Am I missing smth here?
882
.parent *:hover {} means: target all descendants of any element with class="parent", while in a hover-state" (that is, while the descendant is hovered)
.parent:hover * {} means target all descendants of any element with class="parent", while the element with class="parent" is in a hover-state (note that if a descendant element is hovered, so is the .parent, even if they don't form a single cohesive visual unit (e.g. position: absolute is being used).
If your <div class="parent"> has multiple children then the first rule (.parent *:hover {}) will only affect a single descendant while that specific descendant is hovered - so if the user mouse-overs another element then the style-rule would change.
The second rule is such that provided that .parent is mouse-hovered, then all descendants will have their styles changed. This is not a good style rule because the descendant selector will select everything under .parent (e.g. every single <span>, <a>, <p>, etc). You probably should use a more specific selector.
58
Easy. Please hover to the parrent and then to the child.
#child {
width: 100%;
height: 100%;
}
.parent {
background-color: green;
width: 100px;
height: 100px;
padding: 100px;
}
.parent:hover * {
background-color: red;
}
.parent *:hover {
background-color: blue;
}<html>
<head>
<title>HTML Sample</title>
</head>
<body>
<div class="parent">
<div id="child"></div>
</div>
</body>
</html>If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
