8

Probably an obvious beginner question: I'm looking for an easy way to style standard HTML ordered lists without any tags like the following hierarchy: 

A. One
    I. Two
        1. Three 
            a. Four
                aa. Five
                    (I.) Six
                        (1.) Seven 
                            (a.) Eight
                                (aa.) Nine

Is there a CSS solution for this? According to my "research" the custom stylings for levels Five to Nine can only be achieved with CSS counters?

Elip
  • 551
  • 1
  • 4
  • 14

1 Answers1

7

You can achieve this through CSS with use of list-style-type. Apply a custom class to each level of the hierarchy.

ul.a {list-style-type: circle;}
ul.b {list-style-type: square;}

ol.c {list-style-type: upper-roman;}
ol.d {list-style-type: lower-alpha;}

Taken from: http://www.w3schools.com/css/css_list.asp

You can specify custom text by doing this for example:

CSS:

ul.custom
 {
  list-style-type: none;
  padding: 0;
}

ul.custom li.aa:before { content: "aa. "; }
ul.custom li.bb:before { content: "bb. "; }
ul.custom li.cc:before { content: "cc. "; }

HTML:

<ul class="custom">
    <li class="aa">foo</li>
    <li class="bb">bar</li>
    <li class="cc">baz</li>
</ul>

This will result in:

aa. foo
bb. bar
cc. baz

I understand that this isn't the most elegant of solutions, but it is the only way I know of to do it.

Khan
  • 17,904
  • 5
  • 47
  • 59
  • Thx for your answer. I only found the standard styles on the WC3 site, do you have an idea how to get numberings like "aa." "(I.)","(1.)" ? – Elip Apr 02 '12 at 17:23
  • I want to show (1), (2). I tried your solution. It works but it doesn't align correctly. I mean the second line doesn't left margin. – emeraldhieu Sep 26 '12 at 09:58