HTML和CSS，父选择器？

Question

So my problem is that I want to change my <div> background-color and my <h4> to red , either I mouse in a <div> or <h4> .

This is my html (without unnecessary classes).

<div>
    <a href="#"><div><span class="icon-bubbles3"></span></div></a>
    <a href="#"><h4>News</h4></a>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</div>

So I've been trying to apply h4:hover {color: red} then I wanted to target also also my <div> while hovering <h4> , but there is no something like "parent selector" to target my div. So how can i do this? (I don't want to wrap either <div> and <h4> with <a> tag).

Thanks!

Answer 1

First of all you need a class on your outer-most div in order to be able to directly reference this without also referencing the "inner div":

<div class="mydiv">
    <a href="#"><div><span class="icon-bubbles3"></span></div></a>
    <a href="#"><h4>News</h4></a>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</div>

Then you can call:

.mydiv:hover div {
   background-color:red;
}
.mydiv:hover h4 {
   color:red;
}