Nested OL with different counter types

http://stackoverflow.com/questions/22076674

by Jon Beebe

HTML

<ol class="listStyle08">
    <li>List Item
        <ol>
            <li>list item
                <ol>
                    <li>list item a</li>
                    <li>list item b</li>
                </ol>
            </li>
        </ol>
    </li>
    <li>List Item
        <ol>
            <li>list item
                <ol>
                    <li>list item a</li>
                    <li>list item b</li>
                </ol>
            </li>
        </ol>
    </li>
</ol>
<h3>Part2</h3>
<ol>
    <li>List Item
        <ol>
            <li>list item
                <ol>
                    <li>list item a</li>
                    <li>list item b</li>
                </ol>
            </li>
        </ol>
    </li>
    <li>List Item
        <ol>
            <li>list item
                <ol>
                    <li>list item a</li>
                    <li>list item b</li>
                </ol>
            </li>
        </ol>
    </li>
</ol>

CSS

.listStyle08 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;
}