Change color of siblings when child is hovered combined with nth-child

Question

I'm trying to find out if it's possible to change the color of my whole <ul> list when an <li> is hovered.

The caveat is that I want each <li> child to change the <ul> a different color. For example, the first li hovered will change itself and all its siblings red, the second li hovered will change itself and siblings blue, etc. I can get all the siblings to change color when a single <li> is hovered, but I can't seem to make it work with nth-child.

Edit: I did read through this thread but I'm not seeing specifically how it can be combined with nth-child.

Here is the code that I'm working with so far:

    /*when child is hovered, parent will change to this color*/
    ul:hover > li a {
    color: var(--apricot); 
    }
    
    /*when child is hovered, child will change to this color*/
       ul:hover li:nth-child(1) a:hover { 
         color: var(--apricot) !important; 
       }

Is there any way to make this work so that the siblings will change a different color depending on what child is hovered?

ul:nth-of-type(1) li a:hover {} – Kamikaza Jul 12 '23 at 00:57 — Kamikaza, Jul 12 '23 at 00:57

score 3 · Answer 1 · edited Jul 12 '23 at 01:47

3

You may use the :has() pseudo class to achieve it, but it worth noting that some old browsers and Firefox might not work.

ul:has(li:nth-child(1):hover) {
  color: red;
}

ul:has(li:nth-child(2):hover) {
  color: blue;
}

ul:has(li:nth-child(3):hover) {
  color: green;
}

ul:has(li:nth-child(4):hover) {
  color: yellow;
}

<ul>
  <li>item 1</li>
  <li>item 2</li>
  <li>item 3</li>
  <li>item 4</li>
</ul>

edited Jul 12 '23 at 01:47

TylerH

20,799
66
75
101

answered Jul 12 '23 at 01:25

Hao Wu

17,573
6
28
60

It's worth noting that `:has()` is experimental and probably shouldn't be used in production yet in _any_ browser. That being said, it would be greeeat if Firefox would get a move on and prioritize support for it. – TylerH Jul 12 '23 at 01:50
Thank you! Wow, didn't know about the :has selector. However, if my
contains an child, can this still work?

prujuno

Jul 12 '23 at 13:47

Change color of siblings when child is hovered combined with nth-child

1 Answers1