4

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 */
}
Community
  • 1
  • 1
Ky -
  • 30,724
  • 51
  • 192
  • 308
  • Not possible in pure CSS. There were some talks about implementing this at some point, but the reason to not do it was because it would be damn slow. The easiest way to accomplish something like this is by adding a class to the elements which contain the `ul`. – PeeHaa Oct 05 '12 at 19:04
  • Do you use any backend code to render this HTML? – PeeHaa Oct 05 '12 at 19:11
  • The HTML is very simple (which is what I want; a person to easily be able to make their own context menu with minimal hassle/knowledge). Here's a basic menu with a submenu:`
    • Menu item
    • Submenu
      • Submenu item
    `     – Ky - Oct 05 '12 at 19:16

2 Answers2

3

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

tuff
  • 4,895
  • 6
  • 26
  • 43
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

Michal Klouda
  • 14,263
  • 7
  • 53
  • 77
  • +1 - This is what I would do, jQuery is great for situations that standard CSS has a hard time accomplishing. Especially if you're looking for backwards compatibility with older versions of IE. – Number1SuperGuy Oct 05 '12 at 19:30
  • So is [VanillaJS](http://vanilla-js.com/). – PeeHaa Oct 05 '12 at 19:32