How can I use CSS to select and style all LI elements that have UL sub-elements? [duplicate]

Question

Possible Duplicate:
Complex CSS selector for parent of active child

I'm making a CSS context menu and I want all list items that have submenus to be styled differently to visually represent to the user that they have submenus.

The context menu is a UL element, its list items are LIs, and submenus are ULs. I already have the functionality down, I just need to be able to style submenu items differently so that they are obviously different.

Code and Pseudocode:

---

What I have (working CSS):

.bhContextMenu,
.bhContextMenu LI UL{
background:white;
background:rgba(255,255,255,0.95);
border:0.5mm solid lightgray;
border-color:rgba(0,0,0,0.25);
border-radius:1mm;
box-shadow:0 1mm 2mm lightgray;
box-shadow:0 1mm 2mm rgba(0,0,0,0.25);
cursor:default;
display:none;
list-style:none;
margin:0;
padding:0;
position:absolute;
width:1.5in;
}
.bhContextMenu LI{
padding:1mm 4mm;
}
.bhContextMenu LI:hover{
 background: lightgray;
 background: rgba(0,0,0,0.1);
}
.bhContextMenu LI UL{
display:none;
list-style:none;
position:absolute;
left:1.5in;
margin-top:-1.5em;
}
.bhContextMenu LI:hover UL,
.bhContextMenu LI UL:hover{
display:block;
}
.bhContextMenu HR{
border: none;
border-bottom: 0.5mm solid lightgray;
}

What I also want (pseudocode):

.bhContextMenu LI contining UL{
font-weight:bold;/* or something */
}

Answer 1

Unless you're only distinguishing between empty and non-empty elements (which you aren't...), you can't select elements based on their contents.

What you could do is

1. Change your markup to add a class for menu items which contain submenus, and style that.

2. Change your style for submenus in "invisible/folded" mode so that they are actually visible, but only as a little arrow or whatever else you want to use to indicate that there is a submenu there. Demo here: http://jsbin.com/ojociq/1/edit

Answer 2

As already stated, what you ask for is not possible to solve with CSS selectors (see specs).

Of course you could add classes to your list items, but the easiest way to solve what you need is one simple line of jQuery script:

$('li').has('ul').addClass('has-ul');​

DEMO