Is it possible to create multi-level ordered list in HTML?

Question

I want this:

1. Main
  1.1 sub1
  1.2 sub2
2. Main2
  2.1 sub3

is it possible to do this in HTML? Thanks.

score 14 · Answer 1 · answered Sep 10 '12 at 09:18

14

This solution works for me:

/* hide original list counter */
ol li {display:block;} 
/* OR */
ol {list-style:none;}  

ol > li:first-child {counter-reset: item;} /* reset counter */
ol > li {counter-increment: item;} /* increment counter */
ol > li:before {content:counters(item, ".") ". "; font-weight:bold;} /* print counter */

answered Sep 10 '12 at 09:18

Krencl

141
1
2

I did a slight modification of your code fit it to my taste. It is located in another similar question: http://stackoverflow.com/questions/4098195/can-ordered-list-produce-result-that-looks-like-1-1-1-2-1-3-instead-of-just-1/25298818#25298818 – chelder Aug 14 '14 at 01:51

score 8 · Accepted Answer · answered Oct 17 '11 at 08:24

8

Yes, at least in a modern browser:

li li:before {
  counter-increment: item;
  content: counter(item) ". ";
}

(The li li is so it only does this after the first level.)

You'll probably need counter-reset as well.

answered Oct 17 '11 at 08:24

Ariel

25,995
5
59
69

Thanks, Ariel. I added some more for this to make it work. – Rocky Oct 17 '11 at 09:36
But, we need to handle every level for this. A little bit annoying. Does HTML5 handle this better? – Rocky Oct 17 '11 at 09:38

score 0 · Answer 3 · edited Sep 06 '13 at 07:55

0

body
{
    counter-reset:section;
}

h1
{
    counter-reset:subsection;
}

h1:before
{
    counter-increment:section;
    content:"Section " counter(section) ". ";
}

h2:before 
{
    counter-increment:subsection;
    content:counter(section) "." counter(subsection) " ";
}
body
{
    counter-reset:section;
}

This is the sample of counter-increment and counter-reset.

edited Sep 06 '13 at 07:55

nhahtdh

55,989
15
126
162

answered Oct 18 '11 at 02:54

Rocky

5,486
8
32
36

Is it possible to create multi-level ordered list in HTML?

3 Answers3

Linked