Nested Numbered Lists Mixed With Alphabet & Roman Characters - html

Question

May I know is it possible to create something like this :
1. Food
1.1 Vege
a. Carrot
i. White Carrot
ii. Red Carrot
1.2 Meat
a. Chicken
b. beef
2. Beverages
I've seen many solution for mixed list with numbers and alphabets, but I can't make something like this which include number,nested number, alphabet, roman characters using simpler css code.
Refer to the solution on jsFiddle for this question, it only able to create nested number, but without alphabet and roman characters.
Below is what I did (to fake the effect) :
.primary {
list-style-type: none;
counter-reset: item;
margin: 0px;
padding: 0px;
}
/* Direct child under ol */
.primary>li {
counter-increment: item;
}
/* Before direct child under ol */
.primary>li:before {
content: counters(item, ".") ". ";
padding-right: 0.6em;
}
.primary>li li {
margin: 0px;
}
/* Before li of second level ol */
.primary>li li:before {
content: counters(item, ".") " ";
}
/* Third level ol */
.pri-inner {
list-style-type: lower-alpha;
padding-left:20px;
}
/* Hide the counter content on third level */
.pri-inner li:before {
content:none;
display:none;
}
/* Fourth level ol */
.pri-inner2{
list-style-type: lower-roman;
padding-left:25px;
}
The sample html code look like this
<ol class="primary">
<li>First
<ol class="primary">
<li>Inside First</li>
<li>
<ol class="pri-inner">
<li>Inside inside
<ol class="pri-inner2">
<li>Maximum inside</li>
</ol>
</li>
</ol>
</li>
</ol>
</li>
<li>Second</li>
</ol>
So, is there any better way to achieve that? Because I have to hide the counter on 3rd level.

Answer 1

counter() accepts a second parameter for the list type, i.e. counter(item, lower-alpha)
So the following CSS could do it, or could be tweaked to use your class names.
ol {
list-style-type: none;
counter-reset: item;
margin: 0;
padding: 0;
}
li {
display: table;
counter-increment: item;
margin-bottom: 0.6em;
}
li:before {
content: counters(item, ".") ". ";
display: table-cell;
padding-right: 0.6em;
}
li li {
margin: 0;
}
li li:before {
content: counters(item, ".") " ";
}
li li li:before {
content: counter(item, lower-alpha) ". ";
}
li li li li:before {
content: counter(item, lower-roman) ". ";
}
http://jsfiddle.net/eke4afd8/