访问子元素时更改父项的颜色

Question

I'm trying to stylize a horizontal menu item with several child items. My idea was to change the colour of the parent item and the drop down menu as well when a child item of the menu is visited. I'm not so familiar with javaScript that's whY I want to ask for an opinion - is it possible to do this only in CSS approach ?

Here is my HTML:

<ul class="gf-menu l1">
<li class="item128 parent">
 <a class="item" href"services">Services<span class="border-fixer"></span>::after</a>
<div class="dropdown columns-1">
<div class="column col1">
<ul class="l2">
<li class ="item1"><a class="item" href="submenu-01">Submenu1</a></li>
<li class ="item2"><a class="item" href="submenu-02">Submenu2</a></li>
<li class ="item3"><a class="item" href="submenu-03">Submenu3</a></li>
</ul>
</div>
</div>
</li>

And the CSS:

.gf-menu .dropdown{
border: 1px solid transparent; 
border-radius:0; 
background-color:#a9a9a9; 
padding:10% 0; 
width:100%;
text-shadow:none;
font-size:85%;
.gf-menu.l1 li.item1.active.last {background-color:#abcf39;}
.gf-menu.l1 li.item2.active.last {background-color:#f39512;}
.gf-menu.l1 li.item3.active.last {background-color:#f16e68;}

Any help would be appreciated, thank you in advance!

Answer 1

You cannot target a parent of an element with css yet. css selectors level 4 (CSS4) makes this possible by using the "!" on the operand will come out with this feature.

What you can do is the opposite. You can use the pseudo "visited" to target the chile element and give it a certain color

.parent:visited .child {
    Attributes come here
}

Using jQuery you can target the parent with ".parent()" I recommend using that approach for your menu.