target div inside nav on hover

Question

I have a dropdown menu on hover i show different background color for li which has div present with class dropdown and different color for li which dont have sub menu wrapped inside div

<ul class="nav">
<li>
   <a href="page1"> page one</a>
</li>
<li>
   <a href="page2"> page one</a>
   <div class="dropdown"> .....</div>
</li>
<li>
   <a href="page3"> page one</a>
</li>
<ul>

I want to target only li which don't have any sub menu or in other words div present with class class="dropdown".

I know this can be achieved using jquery using hasClass but i want to do this using css only.

AFAIK, you can't target elements that contain certain child elements. http://stackoverflow.com/a/2000614/543224 — rodskagg, Dec 06 '15 at 13:25
css lacks a parent selector so you're not gonna make it with css only. — user3154108, Dec 06 '15 at 13:25

score 0 · Answer 1 · answered Dec 06 '15 at 13:27

0

If you want to separate style and scripting, your best bet is to check for the dropdown class with jQuery and add a class to its parent (e.g. contains_dropdown). Give that class contains_dropdown the style you want.

answered Dec 06 '15 at 13:27

user3154108

1,264
13
23

target div inside nav on hover

1 Answers1