order list not working with ol type="a"

css, html

Solution

Here is a jsfiddle with a working solution.

The styles are copied here for convenience:

ol {
    counter-reset: section;
    list-style-type: none;
}
li:before {
    counter-increment: section;
    content: counters(section, ".") ". ";
}

li li:before {
    counter-increment: section;
    content: counters(section, ".") " ";
}

ol ol ol {
    counter-reset: list;
    margin: 0;
}

ol ol ol > li {
    list-style: none;
    position: relative;
}

ol ol ol > li:before {
    counter-increment: list;
    content: "(" counter(list, lower-alpha) ") ";
    position: absolute;
    left: -1.4em;
}

Sources:

- https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Counters

- Ordered list (HTML) lower-alpha with right parentheses?

- http://jsfiddle.net/nKtE6/2/

Problem

I want to show order list as below using class. I have tried but its not working,please help me How I can do it? ``` 1. List item 1.1 list item (a) lit item a (b) list item b 2. List item 2.1 list item (a) lit item a (b) list item b .listStyle08 { counter-reset: item; } .listStyle08 ol { counter-reset: item; } .listStyle08 li { display: block; } .listStyle08 li:before { content: counters(item, ".") " "; counter-increment: item; display: inline-block !important; padding-right: 10px; } ```

Original source

Related problems