Ordered list in special format

Question

I was looking for a smart way to create a nested ordered list with a particular format:

1. text
2. text
 2.1 text
 2.2 text
 2.3 text
3. text
4. text
 4.1 text
 4.2 text
 4.3 text
5. text

I was trying to use the type atrib in there, but it didn't got me anywhere. I don't need the indentation....but that would be nice...

Thanks in advance :D

I'm having trouble understanding what you're trying to accomplish. Is this static HTML? Where is the text coming from? What have you tried? — Coronus, Feb 15 '13 at 17:11
Take a look at : http://stackoverflow.com/questions/2729927/number-nested-ordered-lists-in-html — Milche Patern, Feb 15 '13 at 17:20

score 4 · Answer 1 · answered Feb 15 '13 at 17:12

4

Use counters for that

OL { counter-reset: item }
LI { display: block }
LI:before { content: counters(item, ".") " "; counter-increment: item }

answered Feb 15 '13 at 17:12

Hary

5,690
7
42
79

OSOM! simple awesome dude :D, now I Have just a litle problem... the first element just shows "1" the nested ones works beautifully, but I would want that the first elem also shows the dot: "1." – Marcos Vargas Moran Feb 15 '13 at 17:28

score 0 · Answer 2 · answered Feb 15 '13 at 17:13

We need to see more of the actual HTML. You can accomplish this kind of numbering (subclauses) with CSS.

ol.main > li {
   counter-increment: root;
}

ol.main > li > ol {
    counter-reset: subsection;
    list-style-type: none;
}

ol.main > li > ol > li {
    counter-increment: subsection;
}

ol.main > li > ol > li:before {
    content: counter(root) "." counter(subsection) " ";
}

Ordered list in special format

2 Answers2