Web Development Blog

24K Design Studio :: Blog :: CSS Counter - Running sequence of nested ordered list
Author:
Password:
CSS Counter - Running sequence of nested ordered list
01:49, 12 Sep, 2010
by James

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

Attachment:
Tags: CSS HTML
Reply:
Your name:
Only visible to the author.

Tell us you are not a robot. What is captcha1captchaOcaptcha2 =

Reply
#1
fwauvgwe
05:03, 25 Nov, 2015
 
1
Reply
Your name:
Only visible to the author.

Tell us you are not a robot. What is captcha1captchaOcaptcha2 =

Reply
View the latest 5 entries.