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).