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

The solutions given here will work, but too much typing. Due to how selectors work in CSS3, it may be simplified thusly,…

/* list styles */

/* ordered lists */

ol { list-style-type: decimal;}
ol ol { list-style-type: upper-alpha;}
ol ol ol {list-style-type: upper-roman;}
ol ol ol ol {list-style-type: lower-alpha;}
ol ol ol ol ol {list-style-type: lower-roman;}
ol ol ol ol ol ol {list-style-type: lower-greek;}

/* ordered and unordered lists */

li { color: red; }
li li { color: orange; }
li li li { color: darkgoldenrod; }
li li li li { color: green; }
li li li li li { color: blue; }
li li li li li li { color: indigo; }

Throwing the “li”s between the “ol”s —and vice-versa— are redundant, and may be omitted.

Furthemore, since the list items will inherit the properties of the ordered/unordered list, the second set may be just as easily done with “ul” istead, (but then, not applied to ordered lists).

/* unordered lists */
ul { 
   list-style-type: circle;
   color: red;
   }
ul ul { 
   list-style-type: disc;
   color: orange;
   }
ul ul ul {
   list-style-type: square;
   color: darkgoldenrod;
   }

This is a generic answer, (since the question is very old, and I surmise that the specific use case has been settled).

Answer 2

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:

<ul>
    <li>This should be green!</li>
    <li>This is also green...
        <ul>
            <li>But this is not, it's, um...blue!</li>
            <li>And so on...</li>
        </ul></li>
    <li>This is green too, just because.</li>
</ul>

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.

Answer 3

Have you tried CSS child-selectors?

ul { /* parent list styles here */ }
ul > li > ul { /* child list styles here */ }

Answer 4

Use the ul li ul li {...} Or

ul li ul {....} to give different style to child list. if you are looking for navigation menu with child menu.

Here is really nice example of same.

It uses CSS3.