Ordered list CSS style includes parent number
css, html-lists, nested
Solution
You should use CSS counters W3C specs (as @Zeta) has pointed out, but here is an approach that will handle multiple nesting and latin counters ..
ol{
list-style: none;
}
ol.roman{
counter-reset: roman;
}
ol.roman > li:before{
counter-increment: roman;
content: counter(roman, upper-latin)".";
padding-right:5px;
}
ol.roman li ol{
counter-reset: inner;
}
ol.roman ol li:before{
counter-increment: inner;
content: counter(roman, upper-latin)"."counters(inner,'.');
padding-right:5px;
}
Demo at http://jsfiddle.net/gaby/nZQSF/
Problem
We're looking to use CSS to create an ordered list that looks like this: ``` A. A.1 A.2 B. C. C.1 C.2 C.2.1 C.2.2 ``` How would you include the parent index in the child like this?