Apply style to multiple elements not working-CodePudding

I have no idea why it's not working...

If I hover over .iconName the svg and h1 should change color. But for some reason the h1 is changing color even without hovering. Why???

The multiple elements work in the first lines but in the hover style it's not working correctly as you can see in the code snippet.

html, body {
    font-family: sans-serif;
}

svg, h1 {
    color: red;
}


.iconName {
    display: flex;
    align-items: center;
    gap: 10px;
    cursor: pointer;
}

.iconName:hover > svg, h1 {
    color: blue;
}

<div >
  <svg width="48" height="48"><path fill="currentColor" d="M5.35 37.25v-4.6H42.7v4.6Zm0-11V21.7H42.7v4.55Zm0-10.95v-4.6H42.7v4.6Z"></path></svg>
  <h1>Menu</h1>
</div>

CodePudding user response：

If you want to select all the child inside a div, you can try this also

.iconName:hover > *{
    color: blue;
}

CodePudding user response：

Just to mark this as an answer:

In order to change the colour on both svg and h1 elements your CSS should be like this:

html, body {
    font-family: sans-serif;
}

svg, h1 {
    color: red;
}


.iconName {
    display: flex;
    align-items: center;
    gap: 10px;
    cursor: pointer;
}

/* Update this */
.iconName:hover svg, 
.iconName:hover h1 {
    color: blue;
}

<div >
  <svg width="48" height="48"><path fill="currentColor" d="M5.35 37.25v-4.6H42.7v4.6Zm0-11V21.7H42.7v4.55Zm0-10.95v-4.6H42.7v4.6Z"></path></svg>
  <h1>Menu</h1>
</div>