Wordpress menu parent item only, CSS targeting

Question

Logic escapes me for two days on what I'm trying to achieve, which is targeting certain class elements in the wordpress menu with CSS. It is usually simple really for me, but something (small usually) is making me battle.

I need to apply a small background image behind the menu item text to the "active" or "current" menu item. But this must apply ONLY to the parent menu items (not on any of the child/submenu dropdown items). Applying the background image is fine, so that's not the issue. It's targeting only on the parent item that's the issue.

I've tried variations of the following CSS (forgot about the background image for now, I'm keeping it simple here, to resolve the targeting) to make the current/active PARENT menu item text turn red:

.main-navigation div ul li.current-menu-parent a:not(.sub-menu)
{color: red !important;}

(I have commented out this custom CSS on the website, to prevent confusion)

The :not pseudo I thought would do the trick but it's possibly my failure at syntax, even though I googled it, to which I may learn something further about CSS today, when resolved.

It's not working how I expect it to. Any ideas? I might revert back here again if I battle with the background image, but I suspect once the 'CSS targeting' is worked out, that shouldn't be an issue to apply.

Thank you brainy people :)

[**Is there a CSS parent selector?**](http://stackoverflow.com/questions/1014861/is-there-a-css-parent-selector?rq=1) = NO. — Paulie_D, Mar 24 '17 at 13:32
Updated my original post with screenshot showing menu drop down and developer tools open showing tags and classes. — Mario, Mar 24 '17 at 15:05
@Paulie_D Reading the thread you posted, I'm assuming then Jquery the solution? — Mario, Mar 25 '17 at 13:00
@Paulie_D Thanks. It baffles my mind as to why CSS can't do it. It's not anything ununual than applying a rule to a certain class and not any other's beneath the parent tag, which is usually what CSS does. As in the first `:not` example in this post https://css-tricks.com/almanac/selectors/n/not/. Nevertheless, I'll explore some jQuery. — Mario, Mar 25 '17 at 13:11

score 2 · Answer 1 · answered Sep 13 '18 at 23:51

The answer is more simple than you think: use the > CSS selector. See articles here and here.

For example: Codepen

/* Target top level only */
.my_navigation > li > a {
    background-color: yellow;
}

/* Or perhaps target only top-level with children */
.my_navigation > .has_children > a {
    background-color: orange;
}

<div>
  <h1>Only top-level parents get styled:</h1>
  <ul class="my_navigation">
    <li><a href="#">Link 1</a></li>
    <li class="current_link has_children">
      <a href="#">Link 2</a>
      <ul>
        <li><a href="#">Link 2a</a></li>
        <li class="current_link has_children"><a href="#">Link 2b</a>
            <ul>
            <li><a href="#">Link I</a></li>
            <li><a href="#">Link II</a></li>
          </ul>
        </li>
        <li><a href="#">Link 2c</a></li>
        <li><a href="#">Link 2d</a></li>
       </ul>
    </li>
    <li>
      <a href="#">Link 3</a>
      <ul>
        <li><a href="#">Link 3a</a></li>
        <li><a href="#">Link 3b</a></li>
       </ul>
    </li>
    <li><a href="#"><a href="#">Link 4</a></li>
  </ul>
</div>

Using Javascript (e.g. jQuery) is overkill in this case. It would be a different story if you're using an eventlistener and need to get the parent of the clicked target; in that case you DO need JS because as others have mentioned CSS doesn't yet have a parent selector yet (but it seems like it's coming in CSS4).

However here you just need to style items on page rendering, and WP provides plethora of classes to work with. Also: Do a Google search for "wordpress menu class walker function" and you can generate some more classes, like identify each level of menu e.g. ".top-level", ".second-level", etc.

parent class could be also ..menu-item-has-children – Iggy Aug 19 '19 at 22:45 — Iggy, Aug 19 '19 at 22:45

score 0 · Answer 2 · answered Mar 24 '17 at 13:52

0

try below, this will select the a tag which is direct child of li.current-menu-parent.

.main-navigation div ul li.current-menu-parent > a{color: red !important;}

answered Mar 24 '17 at 13:52

AG_

2,363
3
15
30

I tried your CSS, no effect. In fact nothing went red. – Mario Mar 24 '17 at 14:54

score 0 · Answer 3 · edited May 23 '17 at 11:46

Seems jQuery was the way to go for the solution, based on the thread Is there a CSS parent selector? posted by @Paulie_D, thank you!

My jQuery solution below targeting only the active parent menu item and inserting a small background image on the <li> menu tag. You can see the yellow 'paint swish' image happening in the screenshot below.

The .not is used to exclude targeting the dropdown submenu items (their class is .sub-menu):

$('.main-navigation .current-menu-item, .main-navigation .current-menu-parent').not('.sub-menu li').css(
    {
    'background-image':'url(PATH TO YOUR IMAGE HERE)',
    'background-size': '100% 50px',
    'background-repeat': 'no-repeat',
    'background-position': 'center'
    }
);

Thanks for your input. I learnt something today.

Wordpress menu parent item only, CSS targeting

3 Answers3