css parent child

Question

Hi,

I have my form inside <ul><li> and working fine when using label and form elements.

The CSS for the form is simple: (no need to explain)

#form ul {....}
#form ul li {....}

My problem is that now, instead of drawing a form element, i want to draw a tree using <ul><li>

<li>  
    <label>Parent Category</label> 
    <div>

      // ... draw TREE here
    </div>
</li>

But my CSS looks like #form ul li {....}, which means that it will affect the <ul><li> that I have for the tree too.

If I use #form ul>li {....} to style only direct children, it doesn't work in IE6.

One solution here is to use #tree ul li {} to cancel out the styling that I don't need from the #form ul>li {}. But the #tree ul li {} is something that I will also use in places that don't need to cancel the #form ul li {} styles.

Is there any other solution I can apply, so #form ul li and #tree ul li are independent from each other?

I hope my question is clear.

Thanks

Answer 1

if you're ok with leaving out IE 6, you can use CSS3 child combinators

#tree > ul >li {put your styles here}

these styles will apply only to the li which is a grand-child of #tree and not to the other li (which is a grand-child of #form)

hope this helps

Answer 2

Put a class on your tree

<div id="tree" class="themed_tree"> ... </div>

and use the selector:

#tree.themed_tree ul li

Answer 3

#form ul li div ul{---cancel styles---}
#form ul li div ul li{---cancel styles---}

Answer 4

Why not make 2 selectors:

#form ul li .tree ul li, .tree ul li {style here}

This way the first selector affects the #tree inside #form and second one will still work for any other tree wherever on the page.