Highlighting parent li when on a sub li

I have an auto generated Wordpress menu that's created the following:

<li class="page_item page-item-23 page_item_has_children">
    <a href="#">Main item 1</a>
    <ul class="children">
        <li class="page_item page-item-52498 current_page_item">
            <a href="#">Item 1</a>
        <li class="page_item page-item-52496">
            <a href="#">Item 2</a>
        <li class="page_item page-item-52477">
            <a href="#">Item 3</a>

I want to say when I'm on the first sub item, highlight the main li.

This is the CSS I'm using (ideally this would be more simple but due to the nature of the auto generated menu it's a bit messy!):

.page-item-52498.current_page_item li.page-item-23 a {
    font-family:'Museo Sans W01 500'!important;

At the moment this doesn't make the first li a white.


One for the future - the subject selector should be arriving in CSS4. It's going to be very powerful but easy to abuse I think.


!subject > selector {
    /* declarations */


!ul > li {
    border: 1px solid green;

Scrolling down to the Parent Selector: http://coding.smashingmagazine.com/2013/01/21/sneak-peek-future-selectors-level-4/

And http://css4-selectors.com/selector/css4/subject-of-selector-with-child-combinator/

That CSS selector doesn't work. You cannot select the .page-item-23 as a child of .page-item-52498, as it is a container for the other in the markup structure.

Have you tried outputting the page ID using the body_class function of WordPress? Then you could try using a selector such as body.page-id-52498 li.page-item-23 a or similar.

The body_class function is used as such (most probably in the header.php template file of WordPress):

<!-- <head> somewhere above -->
<body <?php body_class(); ?>>
<!-- rest of the template somewhere below -->

It should output something similar to this (with a dynamic ID number of course):

<body class="page page-id-112 page-template logged-in admin-bar">

Whenever you've used body_class and it outputs the specific page ID you've declared in the CSS selector I wrote above it will take effect (following standard cascading rules of course).

Tags: Css / Wordpress

Similar questions

Programmatically Create Category and sub Category and sub sub Category
I want insert category like this: Category A thanks this is my code
Display Categories, Sub-categories, and Sub-sub-categories on separate pages
I am building a FAQ section in our mobile site which I would like to have the following hierarchy: Category > Sub-category > Sub-sub-category > Article I would like the category list and each sub-category list to display on its own separate page, rather than use an accordion-style UI (which you find in most FAQ plug-ins). I'm told by my developer t...
Show Sub and Sub-Sub Pages in Sidebar
So, I have a Parent page with multiple Sub Pages. Some of the Sub Pages have Sub Sub Pages. I want to be able to, on the Parent page, only display all the Sub Pages. If you go to a Sub Page it will display all of the Parent's Sub Pages still, but now also display the Sub Sub Pages of the current Sub Page. The current function I have now does almost...
To display category,sub-category,sub-sub categories and postname in url permalink in wordpress php
If a post has three categories.parent category,sub category and sub-sub category.when i click on the post i want the url like category/subcategory/sub-subcategory/postname/ I updated my custom permalink structure as /%category%/%postname%/ But i m not getting the required permalink.I searched a lot and i got some functions.I used that rewrite rules...
jQuery: How can I get sub-menus to stay open when clicking sub-sub-menus
There appear to be a few topics related to this already, but none of their answers seem to quite work for me. So, I'm building a Wordpress theme and I want it to have the ability to have sub-menus and sub-sub-menus, etc. So I end up with a menu structure a bit like this: So, li's that have child ul's have the class "menu-item-has-children", which i...
Multisite - cannot remove specific sub-menu its parent menu. All sub-menus disappear
I am having issue with admin menu in multisite environment. I have a menu called YRC Settings which has two sub-menus, YRC Global Settings (first on the list) and YRC Homepage Settings (second in the list). I want to hide the second item keeping the first one visible, so that when admin/user hovers on the parent menu i.e. YRC Settings, the first on...

Also ask

We use cookies to deliver the best possible experience on our website. By continuing to use this site, accepting or closing this box, you consent to our use of cookies. To learn more, visit our privacy policy.