Change the background for all `li` (hover)

Question

I want to change the background for all li that has div that has <a class="wasAdRead".

<li>
    <div class="notification_div" style="padding-top: 6px;">
         <a class="wasAdRead" style="cursor:pointer;">Remind me later</a>
    </div>
</li>

I tried:

#notification-list li[div[.wasAdRead]]:hover
{
    background: white;
}

Any help appreciated!

You can't do it only with the current CSS (3). You can do it with JS, or wait to CSS 4 :) — Itay, Aug 22 '13 at 07:22
I don't think you can. You're trying tot select the parent element of `.notification_div`, which isn't possible with pure CSS (with JS you can). Also check: http://stackoverflow.com/a/1014958/1930721 — GreyRoofPigeon, Aug 22 '13 at 07:22
Do your li's contain other stuff? if not... why not just put the wasAdRead class into the li element ? or you could change the div's background color, it's not the li itself but as an block element it would fill the whole li's area (unless it has some padding) — aleation, Aug 22 '13 at 07:26

score 3 · Accepted Answer · edited May 23 '17 at 12:28

You can't do this with just CSS (in 2013 anyway). You need to do this with javascript (by select every <li> and check their content). In jQuery, it gives something like:

$("a.wasAdRead").parents('li').css("background-color", "white");

... or you can wait for CSS4 (good luck, you can wait many years for browser supports...)

You can check this post which is about your problem: Is there a CSS parent selector?

score 1 · Answer 2 · answered Aug 22 '13 at 07:26

1

Not possible in CSS, you can do that with JS only. Also you can try this alternative solution.

.notification_div a.wasAdRead{
   display:block;
   padding-top:6px;
   cursor: pointer;
   background-color:white;
}

answered Aug 22 '13 at 07:26

Fabien Papet

2,244
2
25
52

Leo T Abraham · Answer 3 · 2013-08-30T02:31:10.557

1

Are this you are looking for

li > .notification_div > .wasAdRead:hover{
   display:block;
   padding-top:6px;
   cursor: pointer;
   background-color:red;
}

Fiddle

edited Aug 30 '13 at 02:31

answered Aug 22 '13 at 08:12

Leo T Abraham

2,407
4
28
54

Change the background for all `li` (hover)

3 Answers3