Three level decimal ordered list CSS

Question

I have a three level ordered list in html that I would like to give a style as following:

1. Item 1
1.1 Item 2
1.1.1 Item 3

An example of the

Answer 1

your css code is almost fine, see http://plnkr.co/edit/wmGhz7V6CKqZ7MmHIoDF?p=preview

you have an extra </li><li> after level 1, so your markup becomes

<ol>
    <li> Should be Item 1
       <ol>
           <li> Should be Item 1.1</li>
           <li> Should be Item 1.2</li>
           <li> Should be Item 1.3
               <ol>
                   <li> Should be Item 1.3.1</li>
               </ol>
           </li>
           <li>Should be Item 1.4</li> 
       </ol> 
    </li>
    <li> Should be Item 2</li> 
 </ol>

and in your css I've removed the base list style for ol with list-style: none;

Answer 2

Use the following code:

html:

 <ol>
    <li> Should be Item 1        
      <ol>
        <li> Should be Item 1.1</li>
        <li> Should be Item 1.2</li>
        <li> Should be Item 1.3
          <ol>
            <li> Should be Item 1.3.1
          </ol>
        <li>Should be Item 1.4</li> 
      </ol> 
    </li>
    <li> Should be Item 2</li> 
    </ol>

css:

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