Something I do on occassion to get around using the child selector is to apply the child with a descendant selector (a space), then cancelling it for the next level. Such as:
.menu.top.cat ul { background: red; }
.menu.top.cat ul ul { background: none; }
This isn’t the greatest way to do it, but it does get around <=IE7’s buggy-ness with the child selector. An alternative would be to use the child selector, and then use an alternative in an IE-only style sheet (if the rule was important enough).
That will style the ul that is the actual menu and not the parent that contains the menu. There isn’t a css property called :contains but it was proposed and dropped I believe.
If you can’t use IDs or classes as others have mentioned you may be able to cheat and apply an image to the nested ul itself but pull the image into view in the line above.
This means that the image will only be applied where a submenu is present because its applied to the submenu.
Of course it does depend on how you have hidden the submenu to start with (if indeed you are hiding it). I don’t really know if it will be usable in a real situation.
I assume you were looking for something automatic otherwise for good browsers you could use nth-of type (or nth-child) to select the exact element you need.
The child selector methods mentioned in previous posts will just select elements that are a direct child of the parent but that doesn’t take into account whether that item has a submenu or not
If the container of the sub-menu (the containing LI e.g. your #ID menu-item-13) only has the one sub menu and one <a> tag you could simply use the general sibling selector ~ like
.menu.top.cat ul ~ a{background:red;}
(note a and ul switched around)
From what I can see of how you’re structuring the menu this might work?
Thanks for all the helpful responses. I’m on a client deadline today but I wanted to check in to let you know I really appreciate the help and I’ll be testing the suggestions later today.
Good try but the sibling selector selects siblings and not children so the above would not match the required construct I’m afraid.
e.g.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
ul ~ a {
background:red;
}
</style>
</head>
<body>
<ul>
<li><a href="#">I am not red</a>
<ul>
<li>test</li>
</ul>
</li>
</ul>
<a href="#">I am red because I match</a>
</body>
</html>
Fair dinkum it doesn’t work, and I should read the sitepoint reference more carefully.
Though in light of this feel ‘sibling’ ought to be renamed ‘subsequent-sibling’ (or something less wordy but accurate) - I didn’t finish my comp sci degree but know enough about trees to know that ought to have…
(since the UL and A in question most certainly are siblings and not parent/child)
If you can’t use IDs or classes as others have mentioned you may be able to cheat and apply an image to the nested ul itself but pull the image into view in the line above.
Rather than cheating :), you could also just utilize the existing class (menu-item) that is on the LI with the sub-ul. That keeps it’s location where it actually is.
I had to use some overrides because that same class was on the sub-ul li’s, I don’t see what they are good for so they could more than likely be removed.
If I had that many classes and ID’s in a menu I’d put a bullet through my head – lemme guess, turdpress?
Here’s a tip - classes should be used when elements are DIFFERENT, not when they are all the same… if you are resorting to classes like “top” and “cat”, you’re practicing presentational markup, so welcome to 1997.
… and 99% of the time if you have a div around the UL for a menu, you’re just wasting code… and since you are unlikely to be indexing menu entries with # in an anchor – and since I doubt you are targeting each of those ID’s in a unique manner in the CSS, I very much doubt those ID’s need to be in there either.
You’re probably going about it ALL WRONG… though without a link to a live copy and/or the CSS being applied to that, it’s hard to say one way or the other.
I was just assuming that there would be no identifying class and you had to identify the element by the fact that it contains a sub menu. Which of course isn’t possible in CSS - hence the cheat
It would have made a good quiz.
I agree with Jason and wordpress really goes to down on those classes and it actually seems to make things harder.
As an aside I wouldn’t be surprised if it doesn’t auto generate a “haschild” class anyway by default that could be used. Not that I’ve ever used wordpress though.
By default Wordpress does generate a lot of junk classes. I use the menu system a lot, but I always use a custom action and/or filter (depending what exactly I’m doing) to clean them up. With a little clean-up they become exceedingly useful (especially if the one using the menu isn’t a tech person).
