I am trying to format my listing to look like this
1. one
1.1 one.one
1.2 one.two
1.3 one.three
a) one.three.a
b) one.three.b
c) one.three.c
2. two
2.1 two.one
3. three
i tried fiddling but was no success, can anybody help me on what i am doin wrong? the fiddle link is https://jsfiddle.net/freal0s/d632a48w/1/
You need to set the correct class of the root-level ol and > selector so that CSS is not totally confused.
See the solution below:
ol {
list-style-type: none;
}
/* Level 1 */
ol.root {
counter-reset: listStyle;
}
ol.root > li {
margin-left: 1em;
}
ol.root > li::before {
margin-right: 1em;
counter-increment: listStyle;
content: counter(listStyle)".";
}
/* Level 2 */
ol.root > li > ol {
counter-reset: listStyle2;
}
ol.root > li > ol > li::before {
margin-right: 1em;
counter-increment: listStyle2;
content: counter(listStyle, decimal)"."counters(listStyle2,'.');
}
/* Level 3 */
ol.root > li > ol > li > ol {
counter-reset: listStyle3;
}
ol.root > li > ol > li > ol > li::before {
margin-right: 1em;
counter-increment: listStyle3;
content: counter(listStyle3, lower-alpha)")";
}<ol class="root">
<li>one
<ol>
<li>one.one
<ol>
<li>one.one.a</li>
<li>one.one.b</li>
<li>one.one.c</li>
</ol>
</li>
<li>one.two</li>
<li>one.three</li>
</ol>
</li>
<li>two</li>
<li>three</li>
</ol>
