Articles

CSS Counter - Running sequence of nested ordered list

12 September 2010

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. text 1
1. 1. sub 1
2. 2. sub 2
2. text 2
1. 1. sub 1
2. 2. sub 2
3. 3. sub 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. 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: