Automated numbering of nested lists with CSS

2 New Member

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

 
<html>

<head>

<style type="text/css">

ul.numerada{

 counter-reset:c1;

}
 
ul.numerada > ul > ul {

 counter-reset:c2;

}

ul.numerada > ul > ul > ul {

 counter-reset:c3;

}

li{                                 

 list-style-type: none;

}

ul.numerada > ul > li:before{

 counter-increment:c1;

 content: counter(c1) " ";

 background-color:gray;

}

ul.numerada > ul > ul > li:before{

 counter-increment:c2;

 content: counter(c1) "." counter(c2) " ";

 background-color:pink;

}

ul.numerada > ul > ul > ul > li:before{

 counter-increment:c3;

 content: counter(c1) "." counter(c2) "." counter(c3) " ";

 background-color:yellow;

}

</style>

</head>

<body>

<ul class="numerada">

 <li>rar</li>

 <li>rar</li>

 <li>rar</li>

<ul>
 
 <li>rar</li>

<ul>

 <li>rar</li>

 <li>rar</li>

 <li>rar</li>
 
</ul> <li>rar</li>

 <li>rar</li>

<ul>

 <li>rar</li>

 <li>rar</li>

<ul>

 <li>rar</li>

 <li>rar</li>

 <li>rar</li>
 
</ul> <li>rar</li>
 
 <li>rar</li>

 <li>rar</li>

 <li>rar</li>
 
</ul>

</ul>

 <ul>

 <li>rar</li>

 <li>rar</li>

 <li>rar</li>
 
</ul>

</ul>

</body>

</html>

Jan 2 '07 #1

Subscribe Reply

2316

morrhamen

New Member

Just noticed that the first level is skiped. This is a fix:

Expand|Select|Wrap|Line Numbers

 
<html>

<head>

<style type="text/css">

.numerada{

 counter-reset:c1;

}
 
.numerada > ul > ul {

 counter-reset:c2;

}

.numerada > ul > ul > ul {

 counter-reset:c3;

}

li{                                 

 list-style-type: none;

}

.numerada > ul > li:before{

 counter-increment:c1;

 content: counter(c1) " ";

 background-color:gray;

}

.numerada > ul > ul > li:before{

 counter-increment:c2;

 content: counter(c1) "." counter(c2) " ";

 background-color:pink;

}

.numerada > ul > ul > ul > li:before{

 counter-increment:c3;

 content: counter(c1) "." counter(c2) "." counter(c3) " ";

 background-color:yellow;

}

</style>

</head>

<body>

<div class="numerada">

<ul>

 <li>rar</li>

 <li>rar</li>

 <li>rar</li>

<ul>
 
 <li>rar</li>

<ul>

 <li>rar</li>

 <li>rar</li>

 <li>rar</li>
 
</ul> 

 <li>rar</li>

 <li>rar</li>

<ul>

 <li>rar</li>

 <li>rar</li>

 <li>rar</li>
 
 <li>rar</li>

 <li>rar</li>

 <li>rar</li>
 
</ul>

</ul>

<li>rar</li>

 <ul>

 <li>rar</li>

 <li>rar</li>

 <li>rar</li>
 
</ul>

</ul>

</div>

</body>

</html>

Pablo Angulo

Jan 2 '07 #2

ronverdonk

4,258

Recognized Expert Specialist

Both solutions do not work on my IE 6.

Ronald :cool:

Jan 7 '07 #3

drhowarddrfine

7,435

Recognized Expert Expert

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

Recognized Expert Top Contributor

When you say automated I think more of a loop in Javascript to achieve this.

Jan 8 '07 #5

Similar topics

12667

Nested loop limit?

by: chad | last post by:

I am writing a program to do some reliability calculations that require several nested for-loops. However, I believe that as the models become more complex, the number of required for-loops will...

Python

2642

tree functions daily exercise: Range

by: Xah Lee | last post by:

Here's the belated Java solution. import java.util.List; import java.util.ArrayList; import java.lang.Math; class math { public static List range(double n) { return range(1,n,1); }

Python

2940

Updating a nested set

by: Knepley, Jim | last post by:

I'm basing some work on Joe Celko's excellent idea of using nested sets to represent an organizational structure as opposed to an adjacency list. By and large it's a great idea, but not without its...

MySQL Database

2835

Ordered lists - numbering importance

by: Stanimir Stamenkov | last post by:

So if the 'type' attribute of the OL element is deprecated and authors should rely only on stylesheets how one could use a reference (as clear text) in the content to a particular list element? ...

HTML / CSS

4401

nested lists

by: Jane Withnolastname | last post by:

I have a number of unordered lists nested within ULs nested within ULs nested within ULs. I have set the style for LI to be .7em. Mozilla gives me the layout as I imagined it, with the lists...

HTML / CSS

7095

Horizontal nested list

by: Lee K. Seitz | last post by:

I'm still relatively new to stylesheets. I'm trying to do something that seemed fairly simple on the surface, but is proving to be a challenge. I have a set of nested lists: <ul> <li>Side...

HTML / CSS

3631

The </li> before a nested list. Why not?

by: patrick j | last post by:

Hi I'm wondering about lists with nested lists as one does on a Saturday afternoon. Anyway below is an example of a list with a nested list which the iCab browser's very useful HTML...

HTML / CSS

3495

checkboxlist nested inside gridview

by: mutt1170 | last post by:

I have a checkbox list nested inside a gridview. The gridview pulls its data from an objectdatasource and lists countries. The nested checkbox list is databound to another object datasource and...

.NET Framework

2168

Nested lists, simple though

by: Zethex | last post by:

Im a bit new to python. Anyway working on a little project of mine and i have nested lists ie Answer = , ] and so forth.., Anyway the amount of ] do increase over time. Im just wondering...

Python

7157

Changing the language in Windows 10

by: Hystou | last post by:

Most computers default to English, but sometimes we require a different language, especially when relocating. Forgot to request a specific language before your computer shipped? No problem! You can...

Windows Server

7379

Problem With Comparison Operator <=> in G++

by: Oralloy | last post by:

Hello folks, I am unable to find appropriate documentation on the type promotion of bit-fields when using the generalised comparison operator "<=>". The problem is that using the GNU compilers,...

C / C++

7098

The easy way to turn off automatic updates for Windows 10/11

by: Hystou | last post by:

Overview: Windows 11 and 10 have less user interface control over operating system update behaviour than previous versions of Windows. In Windows 11 and 10, there is no way to turn off the Windows...

Windows Server

5682

AI Job Threat for Devs

by: agi2029 | last post by:

Let's talk about the concept of autonomous AI software engineers and no-code agents. These AIs are designed to manage the entire lifecycle of a software development project—planning, coding, testing,...

Career Advice

5084

Access Europe - Using VBA to create a class based on a table - Wed 1 May

by: isladogs | last post by:

The next Access Europe User Group meeting will be on Wednesday 1 May 2024 starting at 18:00 UK time (6PM UTC+1) and finishing by 19:30 (7.30PM). In this session, we are pleased to welcome a new...

Microsoft Access / VBA

3232

Trying to create a lan-to-lan vpn between two differents networks

by: TSSRALBI | last post by:

Hello I'm a network technician in training and I need your help. I am currently learning how to create and manage the different types of VPNs and I have a question about LAN-to-LAN VPNs. The...

Networking - Hardware / Configuration

3221

Windows Forms - .Net 8.0

by: adsilva | last post by:

A Windows Forms form does not have the event Unload, like VB6. What one acts like?

Visual Basic .NET

1591

transfer the data from one system to another through ip address

by: 6302768590 | last post by:

Hai team i want code for transfer the data from one system to another through IP address by using C# our system has to for every 5mins then we have to update the data what the data is updated ...

C# / C Sharp

798

How to add payments to a PHP MySQL app.

by: muto222 | last post by:

How can i add a mobile payment intergratation into php mysql website.

PHP