HTML & CSS, parent selector?

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

enter image description here

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!

either I mouse in a <div> or <h4> so why not use div:hover and div:hover h4 ? — Mr. Alien
– Mr. Alien, Commented Feb 5, 2015 at 13:10
Which <div> background color? I see 2, one nested in the other. — Curtis
– Curtis, Commented Feb 5, 2015 at 13:11
I want to have changed colors of <div> and <h4> together, either I hover <div> or <h4> — Nawol
– Nawol, Commented Feb 5, 2015 at 13:12

Curtis · Accepted Answer · 2015-02-05 13:13:05Z

3

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;
}

answered Feb 5, 2015 at 13:13

Curtis

104k69 gold badges280 silver badges359 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

HTML & CSS, parent selector?

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related