CODEWITHSUNDEEP
csscss-selectors
gokareless
gokareless

Reputation: 1253

What is the difference between parent *:hover {} and parent:hover * {}?

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?

Upvotes: 4

Views: 867

Answers (3)

Nisarg Shah
Nisarg Shah

Reputation: 14541

For .parent:hover * {}, the selector applies to children as soon as you hover over any part of the parent. You can see this in first box by hovering the green part (i.e. padding of the parent), and the color of child will change.

For .parent *:hover {}, the selector is only triggered when a child is hovered. So in the snippet below, for second box, when you hover over the green part (i.e. padding of the parent), the color of child doesn't change. But if you hover over the white part, which is the box of the child, the color will change.

#child {
  width: 100%;
  height: 100%;
}
.parent,
.parent2{
  background-color: green;
  width: 100px;
  height: 100px;
  border: 1px solid red;
  padding: 50px;
}

.parent *, .parent2 *
{
  background-color: white;
  font-size: 50px;
}

.parent:hover * { 
  background-color: red;
}

.parent2 *:hover { 
  background-color: red;
}
<html>
  <head>
    <title>HTML Sample</title>
  </head>
  <body>
    <div class="parent">
      <div id="child">1</div>
    </div>
    
    <div class="parent2">
      <div id="child">2</div>
    </div>
  </body>
</html>

Upvotes: 1

Taras Gordienko
Taras Gordienko

Reputation: 161

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>

Upvotes: 1

Dai
Dai

Reputation: 155145

  • .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.

Upvotes: 7

Related Questions