Why doesn't this CSS selector work (selecting sub-menu in Wordpress)

Question

I am trying to select the sub-menu item from a Wordpress default sidebar menu, and I am trying to write a CSS selector for that. I thought I understand CSS selectors, but I don't know what is happening in this case.

The following ones are working:

.widget_nav_menu ul .menu-item .sub-menu { background: red; }
.widget_nav_menu ul .menu-item li { background: red; }

While this one doesn't work:

.widget_nav_menu ul .menu-item li .sub-menu { background: red; }

Can someone explain to me why can I not specify things to be more precise with both specifying class and type here?

Luckily at this level of customization I don't need to select things more precisely (I only want to hide sub-menu items), but can someone tell me how to make the non-working example work?

Here is a live site, but it’s the same on all Wordpress installs with TwentyTen theme and a multi-level menu on the left.

UPDATE: I think I got a big misunderstanding about the usage of spaces in CSS, so I asked a question here: usage of spaces in CSS files

BTW, after understanding the answers and realising what was wrong with my problem, the correct answer for my problem is:

.widget_nav_menu li.menu-item ul.sub-menu

cweinberger · Accepted Answer · 2011-05-01 22:05:07Z

2

try:

.widget_nav_menu ul .menu-item .sub-menu li { background: red; }

because sub-menu class belongs to ul and there is no sub-menu class after li

answered May 1, 2011 at 22:05

cweinberger

3,5981 gold badge18 silver badges31 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

hyperknot Over a year ago

Thanks it works. But do I understand it right that if there is something like <ul class="sub-menu"> then I have to use either ul or .sub-menu in CSS, not both?

Šime Vidas · Accepted Answer · 2011-05-01 22:05:27Z

1

I believe you want this:

.widget_nav_menu ul .menu-item li.sub-menu { background: red; }

answered May 1, 2011 at 22:05

Šime Vidas

187k66 gold badges290 silver badges392 bronze badges

1 Comment

cweinberger Over a year ago

this shouldn't work, because sub-menu class belongs to ul and there is no li with sub-menu class

billy · Accepted Answer · 2011-05-01 22:07:32Z

0

Try this :

.widget_nav_menu ul .menu-item .sub-menu li { background: red; }

Because the li item is below the .sub-menu ul...

answered May 1, 2011 at 22:07

billy

1,1609 silver badges23 bronze badges

2 Comments

hyperknot Over a year ago

Amazing, almost every word is the same as harakiri's answer.

billy Over a year ago

I know, when I finished writing my answer (2 minutes after him), I saw he had the same answer ! :-S

Collectives™ on Stack Overflow

Why doesn't this CSS selector work (selecting sub-menu in Wordpress)

3 Answers 3

1 Comment

1 Comment

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

1 Comment

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related