I was working on a project which requires me to format a html page with CSS to enable a running sequence of a nested ordered list. As far as I concern, HTML and CSS does not provide the format look like in the word doc. I tried to search from the internet but there is no suitable solution. So I tried to piece out some styles to make it work.

 

Normally the list will appear as:

 

  1. 1. text 1
    1. 1. sub 1
    2. 2. sub 2
  2. 2. text 2
    1. 1. sub 1
    2. 2. sub 2
    3. 3. sub 3
  3. 3. text 3
    1. 1. sub 1
      • a. sub sub 1
      • b. sub sub 2
      • c. sub sub 3
      • d. sub sub 4
  4. 4. text 4
    1. 1. sub 1

 

I modified the CSS, added a class to make it looks like below:

 

1:  <style> 
               
              2:  ul, li{  
              3:       margin:0;   
              4:       padding:0;   
              5:       list-style:none;  
              6:  }  
              7:  .consOL {  
              8:       counter-reset: item;  
              9:       list-style:none;  
              10:       margin-left:0;  
              11:       padding-left:10px;  
              12:       padding-right:10px;  
              13:  }  
              14:  .consOL > li {  
              15:       margin-top: 5px;  
              16:       margin-bottom: 20px;  
              17:  }  
              18:  .consOL > li:before {  
              19:       counter-increment: item;  
              20:       content: counter(item) ". ";  
              21:  }  
              22:  .consOL li > ol{  
              23:       counter-reset: def;  
              24:       padding-left:30px;  
              25:  }  
              26:  .consOL li ol > li {  
              27:       margin-top:10px;  
              28:       margin-bottom:10px;  
              29:  }  
              30:  .consOL li ol > li:before {  
              31:       counter-increment: def;  
              32:       content: counter(item) "." counter(def) " ";  
              33:  }  
              34:  .consOL li ol li ul{  
              35:       padding-left:40px;  
              36:  }  
              37:  .consOL li ol li ul li{  
              38:       margin-top: 5px;  
              39:       margin-bottom: 5px;  
              40:       list-style-type: lower-latin;  
              41:  }  
              42:  </style>

 

The html part:

 

1:  <ol class="consOL">  
              2:  <li>text 1<ol>  
              3:  <li>sub 1</li>  
              4:  <li>sub 2</li>  
              5:  </ol></li>  
              6:  <li>text 2<ol>  
              7:  <li>sub 1</li>  
              8:  <li>sub 2</li>  
              9:  <li>sub 3</li>  
              10:  </ol></li>  
              11:  <li>text 3<ol>  
              12:  <li>sub 1   
              13:  <ul>  
              14:  <li>sub sub 1</li>  
              15:  <li>sub sub 2</li>  
              16:  <li>sub sub 3</li>  
              17:  <li>sub sub 4</li>  
              18:  </ul>  
              19:  </li>  
              20:  </ol></li>  
              21:  <li>text 4<ol>  
              22:  <li>sub 1</li>  
              23:  </ol></li>  
              24:  </ol>

 

 

Final results:

 

  1. text 1
    1. sub 1
    2. sub 2
  2. text 2
    1. sub 1
    2. sub 2
    3. sub 3
  3. text 3
    1. sub 1
      • sub sub 1
      • sub sub 2
      • sub sub 3
      • sub sub 4
  4. text 4
    1. sub 1

 

A few refernce page on CSS counter:

http://www.css-zibaldone.com/articles/counters/csscounters.html

http://community.wikidot.com/forum/t-15212/how-to-customize-list-nesting-in-numbered-lists