Nested ordered HTML / CSS list

Question

-I am trying to create CSS for a sub-sub-ordered list.

- I would also like to retreat every subscription.

-How does the style work for each title, for example. 1, 2 and 3

HTML

<ol>
  <li>Item
      <ol>
          <li>Item</li>
          <li>Item</li>
      </ol>
  </li>

  <li>Item          
       <ol>
          <li>Item</li>
          <li>Item
            <ol>
              <li>Item</li>
              <li>Item</li>
            </ol></li>
          <li>Item</li>
          <li>Item</li>
       </ol>
   </li>

   <li>item</li>
</ol>

Achieved result

1. Item
    1.1 Item
    2.2 Item

2. Item
    2.1 Item
    2.2 Item
      2.2.1 Item
      2.2.2 Item
    2.3 Item
    2.4 Item

3. Item

CSS

This is what I got so far:

ol {
list-style-type: none;
counter-reset: item;
}

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

Answer 1

Update your css to the following

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

For reference - http://jsfiddle.net/f3adtsmb/