Question

I’m searching for a way to apply the so called “alphanumeric order” for standard html ordered lists. (Alphanumeric: http://de.wikipedia.org/wiki/Gliederung#Alphanumerische_Gliederung)

I would like to achieve this without manually adding any tags to the html content. It seems to me that there is no way to achieve this in CSS? Could this possibly be done with jQuery?
I’m very new to programming, any help is greatly appreciated.

Answer 1

I think this would be a CSS solution pretty close to your example.
http://jsfiddle.net/UChFP/5/

/*1*/
div ul{
    list-style-type:upper-alpha;
}
/*2*/
div ul ul{
    list-style-type:upper-roman;
}
/*3*/
div ul ul ul{
    list-style-type:decimal;
}
/*4*/
div ul ul ul ul{
    list-style:none;
}
div ul ul ul ul>li:before{
    content: counter(section, lower-alpha) ") ";}
div ul ul ul ul>li {
    counter-increment: section;
}
/*5*/
div ul ul ul ul ul{
    list-style:none;
}
div ul ul ul ul ul>li:before{
    content: counter(sectionU, lower-alpha) counter(sectionU, lower-alpha) ") ";}
div ul ul ul ul ul>li {
    counter-increment: sectionU;
}
/*6*/
div ul ul ul ul ul ul{
    list-style:none;
}
div ul ul ul ul ul ul>li:before{
    content: "(" counter(sectionUU, decimal) ") ";}
div ul ul ul ul ul ul>li {
    counter-increment: sectionUU;
}
/*7*/
div ul ul ul ul ul ul ul{
    list-style:none;
}
div ul ul ul ul ul ul ul>li:before{
    content: counter(sectionUUU, lower-greek) ") ";}
div ul ul ul ul ul ul ul>li {
    counter-increment: sectionUUU;
}

This is a pretty nice CSS-only solution, supporting all levels of your example.