Nwsted lists

by Dmitry Maximov

HTML

<ol>
  <li>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris adipiscing ante sed purus egestas, vitae sodales velit eleifend. Nunc nec aliquet elit.</li>
  <li>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</li>
    <ol>
      <li>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris adipiscing ante sed purus egestas, vitae sodales velit eleifend. Nunc nec aliquet elit.</li>
      <li>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</li>
      <ol>
        <li>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris adipiscing ante sed purus egestas, vitae sodales velit eleifend. Nunc nec aliquet elit.</li>
        <li>Lorem ipsum dolor sit amet.</li>
      </ol>         
    </ol>    
    <li>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris adipiscing ante sed purus egestas, vitae sodales velit eleifend..</li>
    <li>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris adipiscing ante sed purus egestas, vitae sodales velit eleifend. Nunc nec aliquet elit.</li>
    <li>Lorem ipsum dolor sit amet.</li>
</ol>

CSS

ol { 
  counter-reset: level-1; 
  list-style: none; 
  padding-left: 0;
} 
ol li:before { 
  counter-increment: level-1; 
  content: counter(level-1) '. ';
} 


ol ol { 
  counter-reset: level-2; 
  padding-left: 40px;
}
ol ol li:before { 
  counter-increment: level-2; 
  content: counter(level-1) '.' counter(level-2) '. ';
}


ol ol ol { 
  counter-reset: level-3; 
} 
ol ol ol li:before { 
  counter-increment: level-3; 
  content: counter(level-1) '.' counter(level-2) '.' counter(level-3) '. '; 
}