Highlighting parent li when on a sub li

Question

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>
        <li class="page_item page-item-52496">
            <a href="#">Item 2</a>
        </li>
        <li class="page_item page-item-52477">
            <a href="#">Item 3</a>
        </li>
    </ul>
</li>

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 {
    color:white!important;
    font-family:'Museo Sans W01 500'!important;
}

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

No possible with CSS alone, instead use `.page_item_has_children:hover {color: #f00;}` and set the color of active state, this way it will apply the color even when you move the cursor on the sub menu — Mr. Alien, Feb 25 '14 at 14:06
see here: http://stackoverflow.com/questions/1014861/is-there-a-css-parent-selector — DonJuwe, Feb 25 '14 at 14:09

score 1 · Accepted Answer · answered Feb 25 '14 at 14:16

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).

score 0 · Answer 2 · answered Feb 25 '14 at 14:30

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.

Syntax

!subject > selector {
    /* declarations */
}

Example

!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/

Highlighting parent li when on a sub li

2 Answers2