How to separate styles in a nested list styling?

Question

I have a list and list also has list in it.
I set styles on parent list but I want different styles for parent and child list but they are mixed somehow I can\'t separat

Answer 1

Simply use the > direct/immediate descendant combinator, and an id to specify which li (or ul) elements you're targeting:

#accountNavigation { /* outer ul element */
}

#accountNavigation > li { /* outer ul element's children li */
}

#accountNavigation > li > ul { /* first 'inner' ul element */
}

#accountNavigation > li > ul > li { /* first 'inner' ul element's li children */
}

You can, of course, be more generic and simply use:

ul { /* targets all ul elements */
    /* general styles */
}
ul li { /* targets all li elements within a ul */
    /* general styles */
}
ul li ul { /* targets all ul elements within an li element, itself within a ul */
    /* overrule general 'outer' styles */
}
ul li ul li { /* targets all li elements within a ul element,
                 within an li element, itself within a ul...and so on */
    /* overrule general 'outer' styles */
}

Using the general approach:

    
This should be green!
    
This is also green...
        

            
But this is not, it's, um...blue!
            
And so on...
        
    
This is green too, just because.

The following CSS should demonstrate its use:

ul li {
    color: green; /* the 'general'/'default' settings */
    margin-left: 10%;
}

ul li ul li {
    color: blue; /* this overrides the 'general' color setting */
                 /* the margin is not overridden however */
}​

JS Fiddle demo.

References:

• CSS Selectors (Level 3), at the W3.org.