468,738 Members | 2,574 Online
Bytes | Developer Community
New Post

Home Posts Topics Members FAQ

Post your question to a community of 468,738 developers. It's quick & easy.

Automated numbering of nested lists with CSS

Hello! This is actually a reply to post:
http://www.thescripts.com/forum/threadnav100612-1-10.html
from July 2005, to which I can't reply.
The following code does "Automated numbering of nested lists with CSS". It is standard CSS, and works with Firefox and Opera. If anyone can test it with other browsers, I'd be grateful. I won't be surprised if it doesn't work with some versions of Internet Explorer, which doesn't do a great work with CSS:
Expand|Select|Wrap|Line Numbers
  1. <html>
  2. <head>
  3. <style type="text/css">
  4. ul.numerada{
  5.  counter-reset:c1;
  6. }
  7.  
  8. ul.numerada > ul > ul {
  9.  counter-reset:c2;
  10. }
  11. ul.numerada > ul > ul > ul {
  12.  counter-reset:c3;
  13. }
  14. li{                                 
  15.  list-style-type: none;
  16. }
  17. ul.numerada > ul > li:before{
  18.  counter-increment:c1;
  19.  content: counter(c1) " ";
  20.  background-color:gray;
  21. }
  22. ul.numerada > ul > ul > li:before{
  23.  counter-increment:c2;
  24.  content: counter(c1) "." counter(c2) " ";
  25.  background-color:pink;
  26. }
  27. ul.numerada > ul > ul > ul > li:before{
  28.  counter-increment:c3;
  29.  content: counter(c1) "." counter(c2) "." counter(c3) " ";
  30.  background-color:yellow;
  31. }
  32. </style>
  33. </head>
  34. <body>
  35. <ul class="numerada">
  36.  <li>rar</li>
  37.  <li>rar</li>
  38.  <li>rar</li>
  39. <ul>
  40.  
  41.  <li>rar</li>
  42. <ul>
  43.  <li>rar</li>
  44.  <li>rar</li>
  45.  <li>rar</li>
  46.  
  47. </ul> <li>rar</li>
  48.  <li>rar</li>
  49. <ul>
  50.  <li>rar</li>
  51.  <li>rar</li>
  52. <ul>
  53.  <li>rar</li>
  54.  <li>rar</li>
  55.  <li>rar</li>
  56.  
  57. </ul> <li>rar</li>
  58.  
  59.  
  60.  <li>rar</li>
  61.  <li>rar</li>
  62.  <li>rar</li>
  63.  
  64. </ul>
  65. </ul>
  66.  <ul>
  67.  <li>rar</li>
  68.  <li>rar</li>
  69.  <li>rar</li>
  70.  
  71. </ul>
  72. </ul>
  73. </body>
  74. </html>
  75.  
  76.  
Jan 2 '07 #1
4 2109
Just noticed that the first level is skiped. This is a fix:

Expand|Select|Wrap|Line Numbers
  1. <html>
  2. <head>
  3. <style type="text/css">
  4. .numerada{
  5.  counter-reset:c1;
  6. }
  7.  
  8. .numerada > ul > ul {
  9.  counter-reset:c2;
  10. }
  11. .numerada > ul > ul > ul {
  12.  counter-reset:c3;
  13. }
  14. li{                                 
  15.  list-style-type: none;
  16. }
  17. .numerada > ul > li:before{
  18.  counter-increment:c1;
  19.  content: counter(c1) " ";
  20.  background-color:gray;
  21. }
  22. .numerada > ul > ul > li:before{
  23.  counter-increment:c2;
  24.  content: counter(c1) "." counter(c2) " ";
  25.  background-color:pink;
  26. }
  27. .numerada > ul > ul > ul > li:before{
  28.  counter-increment:c3;
  29.  content: counter(c1) "." counter(c2) "." counter(c3) " ";
  30.  background-color:yellow;
  31. }
  32. </style>
  33. </head>
  34. <body>
  35. <div class="numerada">
  36. <ul>
  37.  <li>rar</li>
  38.  <li>rar</li>
  39.  <li>rar</li>
  40. <ul>
  41.  
  42.  <li>rar</li>
  43. <ul>
  44.  <li>rar</li>
  45.  <li>rar</li>
  46.  <li>rar</li>
  47.  
  48. </ul> 
  49.  <li>rar</li>
  50.  <li>rar</li>
  51. <ul>
  52.  <li>rar</li>
  53.  <li>rar</li>
  54.  <li>rar</li>
  55.  
  56.  
  57.  <li>rar</li>
  58.  <li>rar</li>
  59.  <li>rar</li>
  60.  
  61. </ul>
  62. </ul>
  63. <li>rar</li>
  64.  <ul>
  65.  <li>rar</li>
  66.  <li>rar</li>
  67.  <li>rar</li>
  68.  
  69. </ul>
  70. </ul>
  71. </div>
  72. </body>
  73. </html>
  74.  
  75.  
Pablo Angulo
Jan 2 '07 #2
ronverdonk
4,258 Expert 4TB
Both solutions do not work on my IE 6.

Ronald :cool:
Jan 7 '07 #3
drhowarddrfine
7,435 Expert 4TB
You have misplaced your <ul> tags or closing </ul> tags. Either your <ul> tags are not matched properly with the closing tags or, if you are trying to make a <ul> one of the list items, then you need to enclose it in <li> tags.

Make sure you are using a proper strict doctype, too.
Jan 8 '07 #4
AricC
1,892 Expert 1GB
When you say automated I think more of a loop in Javascript to achieve this.
Jan 8 '07 #5

Post your reply

Sign in to post your reply or Sign up for a free account.

Similar topics

25 posts views Thread by chad | last post: by
15 posts views Thread by Xah Lee | last post: by
reply views Thread by Knepley, Jim | last post: by
6 posts views Thread by Stanimir Stamenkov | last post: by
7 posts views Thread by Jane Withnolastname | last post: by
4 posts views Thread by Lee K. Seitz | last post: by
7 posts views Thread by patrick j | last post: by
7 posts views Thread by Zethex | last post: by
1 post views Thread by CARIGAR | last post: by
By using this site, you agree to our Privacy Policy and Terms of Use.