0

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.

Elip
  • 551
  • 1
  • 4
  • 14

1 Answers1

3

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.

Alex
  • 6,276
  • 2
  • 20
  • 26
  • 1
    Note that you can simplify the selectors to `div ul`, `div ul ul`, `div ul ul ul`, etc. – Phrogz Apr 02 '12 at 19:00
  • Thank you Phrogz. No idea why I did it so complicated x__O (btw- updated, now 6 levels) – Alex Apr 02 '12 at 19:02
  • Thank you, thats a brilliant solution! Now I'm finally beginning to understand how CSS counters work... – Elip Apr 02 '12 at 19:13