CODEWITHSUNDEEP
htmlcss
BeanBoy
BeanBoy

Reputation: 875

Apply style to multiple elements not working

If I hover over .iconName the svg and h1 should change color.

But the h1 is changing color even without hovering.

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 class="iconName">
  <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>

Upvotes: 0

Views: 76

Answers (3)

Ahmed Mansour
Ahmed Mansour

Reputation: 600

you have done it right.. just a small fix needed

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

svg, h1 {
    color: red;
}


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

.iconName:hover > svg,.iconName:hover >  h1 {
    color: blue;
}
<div class="iconName">
  <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>

Upvotes: 1

Shakil Ahmed
Shakil Ahmed

Reputation: 89

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

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

Upvotes: 1

Miguel Garrido
Miguel Garrido

Reputation: 1151

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 class="iconName">
  <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>

Upvotes: 0

Related Questions