How can I hover on an element and change the style of far ancestor?

Question

<div class="header-wrapper">
    <div> 
        <nav>
           <ul>
               <li>
                 <a class="link" href="/">Link</a>
               </li>
           </ul>
        </nav>
    </div>
</div>

I want to change the background colour of the div with the class header-wrapper when hovering on the link. Can I do this with just css or scss?

a.link:hover {
.header-wrapper {
    background: red;
   }
}

And several more variations of this, parent selector in scss.

nope, this is like parent-inception.- their question is "How do I select the
@Jessica: Perhaps that question should be revised to change "parent" to "ancestor" in general since most developers do incorrectly refer to distant ancestors as parents... in any case, it doesn't matter whether the element you want is a parent or a distant ancestor, there is no clean CSS solution for it. — BoltClock, Sep 16 '18 at 06:11
Even so, the [answer](https://stackoverflow.com/questions/1014861/is-there-a-css-parent-selector#answer-1014958) was updated this year. — msg, Sep 16 '18 at 06:30

Andrew Li · Accepted Answer · 2018-09-16T06:50:17.647

1

I think that there is no way to select the parent with only css,scss though they work for Selector-4.
Now you have to use javascript or jQuery for your purpose because select-4 doesn't support for all browsers yet.
Fortunately you could use selector :has() in the jQuery.

    $(".header-wrapper:has(a:hover)").addClass("hoverlink");

Here is an example

edited Sep 16 '18 at 06:50

answered Sep 16 '18 at 06:40

Andrew Li

1,005
12
29

How can I hover on an element and change the style of far ancestor?

1 Answers1