html - Nested ordered lists with different start counter -

html - Nested ordered lists with different start counter -

i utilize nested counter create html ordered list.

this code:

http://jsfiddle.net/katalhama/ypgff/

i expect output

0. 0 0.1 zero.one 1. 1 1.1. one.one 1.2. one.two 1.3. one.three 2. 2 2.1 two.one 2.2 two.two 2.2.1 two.two.one 2.2.2 two.two.two 3. 3

but instead got this:

0. 0 0.0 zero.one 1. 1 1.0 one.one 1.1 one.two 1.2 one.three 2. 2 2.0 two.one 2.1 two.two 2.1.0 two.two.one 2.2.1 two.two.two 3. 3

i want start 0 index, wanna sublists index start @ 1. thought using 2 counters, i'm not familiar advanced css yet , don't know howw manage them :(

thanks all!

there 2 problems in code. first serious. html code in fact invalid. ol can contains li elements direct children. added ol elements direct children of ol. have wrap ol elements within li elements. sec problem problem asked for. accomplish want, can set counter-reset differently outermost ol , others ol:

html:

<ol id='list'> <li>one</li> <li>two <ol> <li>two.one</li> <li>two.two</li> <li>two.three</li> </ol> </li> <li>three</li> <li>four <ol> <li>four.one</li> <li>four.two <ol> <li>four.two.one</li> <li>four.two.two</li> </ol> </li> </ol> </li> <li>five</li> </ol>

css:

#list { counter-reset: item -1; } ol { counter-reset: item; padding-left: 10px; } li { display: block } li:before { content: counters(item, ".") " "; counter-increment: item; } demo 1

without using id outermost ol, can this:

ol { counter-reset: item -1; } ol ol { counter-reset: item; padding-left: 10px; } li { display: block } li:before { content: counters(item, ".") " "; counter-increment: item; } demo 2

here approach:

ol { counter-reset: item -1; } li { display: block } li:before { content: counters(item, ".") " "; counter-increment: item; } ol ol li:first-child:before { counter-increment: item 2; } demo 3

html css