Html ordered list 1.1, 1.2 (Nested counters and scope) not working

Question

I use nested counters and scope to create an ordered list:

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

<ol>      <li>one</li>      <li>two</li>      <ol>          <li>two.one</li>          <li>two.two</li>          <li>two.three</li>      </ol>      <li>three</li>      <ol>          <li>three.one</li>          <li>three.two</li>          <ol>              <li>three.two.one</li>              <li>three.two.two</li>          </ol>      </ol>      <li>four</li>  </ol>

I expect the following outcome:

1. one 2. two   2.1. two.one   2.2. two.two   2.3. two.three 3. three   3.1 three.one   3.2 three.two     3.2.1 three.two.one     3.2.2 three.two.two 4. four 

Instead, this is what I see (wrong numbering):

1. one 2. two   2.1. two.one   2.2. two.two   2.3. two.three 2.4 three <!-- this is where it goes wrong, when going back to the parent -->   2.1 three.one   2.2 three.two     2.2.1 three.two.one     2.2.2 three.two.two 2.3 four 

I have no clue, does anyone see where it goes wrong?

Here is a JSFiddle: http://jsfiddle.net/qGCUk/2/

Answer 1

Uncheck "normalize CSS" - http://jsfiddle.net/qGCUk/3/ The CSS reset used in that defaults all list margins and paddings to 0

UPDATE http://jsfiddle.net/qGCUk/4/ - you have to include your sub-lists in your main <li>

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

<ol>    <li>one</li>    <li>two      <ol>        <li>two.one</li>        <li>two.two</li>        <li>two.three</li>      </ol>    </li>    <li>three      <ol>        <li>three.one</li>        <li>three.two          <ol>            <li>three.two.one</li>            <li>three.two.two</li>          </ol>        </li>      </ol>    </li>    <li>four</li>  </ol>

Answer 2

Use this style to change only the nested lists:

ol {     counter-reset: item; }  ol > li {     counter-increment: item; }  ol ol > li {     display: block; }  ol ol > li:before {     content: counters(item, ".") ". ";     margin-left: -20px; }