I need help with styling the current page list item in a menu that has the 'current_page_item' class.
In this case, I want to highlight the "About Us" list item.
I'm struggling with excluding the 'children' class (sub ul) using :not() in CSS so that the children item "Careers" does not get highlighted as well.
<div class="footer-widget-area">
<ul>
<li class="page_item page_item_has_children current_page_item"><a href="http://localhost/newtheme/about-us/">About Us</a>
<ul class='children'>
<li class="page_item"><a href="http://localhost/newtheme/about-us/careers/">Careers</a></li>
</ul>
</li>
<li class="page_item"><a href="http://localhost/newtheme/contact/">Contact</a></li>
<li class="page_item"><a href="http://localhost/newtheme/press/">Press</a></li>
</ul>
</div>
CSS:
.footer-widget-area .current_page_item :not(.children) a {background-color:yellow}
When I use :not(.children), it ends up highlighting "Careers" instead of "About Us." This is not what I intended.
I've set up a JS fiddle for reference:
https://jsfiddle.net/5vr0sqm5/
Your assistance is greatly appreciated.