CSS how to select each li after the one im hovering, IF i hover over a specific child of that li

Question

I've been banging my head against this for a couple hours now. Maybe it can't be done, maybe I've missed something obvious.

I need to highlight the li I'm hovering over, and each li after that but not before, and only if I'm also hovering over a specific child of that li.

So in the code example, if I hover over the second li's div.doAThing, the second through to last li should highlight. I'm not sure how to get the selection working.

li
{
  background-color: #3e3e3e;
}

li:hover, li:hover ~ li
{
  background-color: #aaf500;
}

<ul id="theList">
  <li>
    <div>Data</div>
    <div>One</div>
    <div class='doAThing'>All</div>
  </li>
  <li>
    <div>Data</div>
    <div>One</div>
    <div class='doAThing'>All</div>
  </li>
  <li>
    <div>Data</div>
    <div>One</div>
    <div class='doAThing'>All</div>
  </li>
  <li>
    <div>Data</div>
    <div>One</div>
    <div class='doAThing'>All</div>
  </li>
</ul>

score 1 · Accepted Answer · answered Jul 02 '17 at 20:20

As far I know, it can't be done with only CSS. You need some way to target the parent, which isn't really possible with only CSS. I don't know if your able to use JavaScript/jQuery in your project, but I've put together an example of how you could do it. Basically, when you hover a .doAThing element, we add a class hover to its parent (the li). And then we can easily target those specific elements in a similar way you did in the code you provided. Hope it helps. Please see the following SO links for further information:

Is there a CSS parent selector?

Complex CSS selector for parent of active child

$('.doAThing').hover(function() {
  $(this).parent().addClass('hover');
}, function () {
  $(this).parent().removeClass('hover');
});

li {
  background-color: #3e3e3e;
}
.hover, .hover ~ li {
  background-color: #aaf500;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul id="theList">
  <li>
    <div>Data</div>
    <div>One</div>
    <div class='doAThing'>All</div>
  </li>
  <li>
    <div>Data</div>
    <div>One</div>
    <div class='doAThing'>All</div>
  </li>
  <li>
    <div>Data</div>
    <div>One</div>
    <div class='doAThing'>All</div>
  </li>
  <li>
    <div>Data</div>
    <div>One</div>
    <div class='doAThing'>All</div>
  </li>
</ul>

Yeah, I was hoping to do it in just CSS, but I'm already using JQuery so this is a short and easy solution. Thanks! — Christopher Roy, Jul 02 '17 at 20:34
@ChristopherRoy Great! Don't forget to accept my answer if it did help you solve your problem. — Gustaf Gunér, Jul 02 '17 at 20:38
Successful workaround, but I changed the .hover class name to something else. — Christopher Roy, Jul 03 '17 at 18:11

score 0 · Answer 2 · answered Dec 11 '17 at 22:24

0

I had the same issue, i just used child of

li:hover > * {
  font-size: 17px;
}

Hope it helps

answered Dec 11 '17 at 22:24

Fernando B

864
2
12
27

CSS how to select each li after the one im hovering, IF i hover over a specific child of that li

2 Answers2