How to give style to list item only if item has another <ul> inside otherwise style should not apply?

Question

How to give style to list item only if item has another list inside otherwise style should not apply? using css only.

See example here http://jsbin.com/udora

I want to remove arrows from all other items except "Articles" and "Pitching Past the 7th Inning"

I realized it's not possible with css any working jquery solution with demo?

Answer 1

You can't write a css rule based on the descendants of the desired element.

But you could try applying the style to the inner ul, something like

li ul { foo: bar }

or if you need to not apply to 'Articles' then

li li ul { foo: bar }

Alternatively, in jquery you can say

$('li:has(ul)').css('foo', 'bar');

Answer 2

you could use the ul id and do something like this,

#sitemap>li>li {
    type: apply-style;
}

EDIT:

#sitemap>li means the li child of an element with id="sitemap" and similarly, #sitemap>li>li means the li child of the li child of an element with id #sitemap.

read more about css selectors here

EDIT2:

actually since the second li has to be under a second ul,

#sitemap>li>ul>li {
}

just keep in mind that > means direct child.

NOTE: This will not work in IE6.

Answer 3

What you have available in CSS (CSS-2 precisely) .. is descendant selector .. that is what others have been suggesting you .. and that is also from where(link) you came up with this idea ..

The idea your searching for is called .. Ascendant selector .. (where you go for the element which contains the particular element within) which is unfortunately not available with CSS-2 but it has been proposed in CSS-3 ..
Everywhere, they suggest to use classes and Ids as an alternative (which is more painful stuff .. in design and maintainance point of view ..) ... ultimately proving this is the handicap with CSS-2 ..