CSS on nested list : avoid styling of both lists

Question

I have the folowing nested list structure:

HTML:

    

        

            Item label
                  


        
      

Answer 1

Ordering the css properly is the key word.

http://jsfiddle.net/wHztz/

CSS:

ul { background: red; }
ul ul { background: green }

ul li { background: yellow; margin: 10px;}
ul ul li { background: blue; }

HTML is the same as in your question, minus the div.

Edit: Damn i always end up realizing things after ive posted my answer.. Seems like you had this idea.

About putting classes to the list. You would only need to put classes to the ul's ( Nevermind.. it depends )

---

Edit2: If youd insist on using classes on each element but really dont care for adding them manually, you could do something like this: http://jsfiddle.net/wHztz/5/

This gives each ul a class in sequence: ulist1, ulist2, ulist3... depending on how many uls you have of course.

---

Edit3: changed the code a little.

http://jsfiddle.net/wHztz/6/ - Note that i didnt change anything in the CSS so CSS doesnt do a thing in this example.

jQuery:

   $("#my_nested_list > ul, ul ul").each(function (i) {
        i = i+1;
        $(this).addClass("list"+i).children().addClass("list"+i);
   });

This generates to:

    

        

            Item label
            

                
Subitem 1
                
Subitem 2
                
Subitem 3
            
        

        
...
      
   
          

You could easily target this like:

ul.list1 {}
li.list1 {}

ul.list2 {}
li.list2 {}

---

Note that you could change this part:

$(this).addClass("list"+i).children().addClass("list"+i);

into

$(this).addClass("ul"+i).children().addClass("li"+i);

and it would result to this.

    

        

            Item label
            

                
Subitem 1
                
Subitem 2
                
Subitem 3
            
        

        
...