Nested <ol> - display the full path of a structured list?

Question

I have many HTML documents that contain legal information, each of which is a nested ordered list that alternates between letters and numbers. For instance:

<ol type="1"> <li>First</li> <li>Second <ol type="a"> <li>Third</li> <li>Fourth <ol type="1"> <li>Fifth</li> </ol> </li> <li>Sixth</li> </ol> </li> <li>Seventh</li> </ol> 

I would like to use CSS or jQuery to display the full path of each list item, so the above list will result in:

 1) First 2) Second 2.a) Third 2.b) Fourth 2.b.1) Fifth 2.c) Sixth 3) Seventh 

I know that you can use counters in CSS to do this with numbers, but is there a way to do this with letters too?

Answer 1

How about a little jQuery for adding indexes:

 var letters = 'abcdefghijklmnopqrstuvwxyz'; $('li').each(function (i, ele) { $('<span />', {html : (function() { return $(ele).parents('li').addBack().map(function (_, a) { return isNaN( $(a).parent('ol').attr('type') ) ? letters[$(a).index()] : $(a).index() + 1; }).get().join('.') + ')&nbsp;'; }())}).prependTo(ele); }); 

Fiddle

Answer 2

Here is one way to do this using standard CSS 2.1.

The HTML is similar to yours, except that I have defined some classes for convenience:

 <ol class="level-1" type="1"> <li>First</li> <li>Second <ol class="level-2" type="a"> <li>Third</li> <li>Fourth <ol class="level-3" type="1"> <li>Fifth</li> </ol> </li> <li>Sixth</li> </ol> </li> <li>Seventh</li> </ol> 

For CSS, I define 3 custom counters (cnt-1, cnt-2, cnt-3) and use the content to display custom formatted labels:

 ol.level-1 { counter-reset: cnt-1; list-style: none; } ol.level-1 li:before { content: counter(cnt-1)"."; counter-increment: cnt-1 } ol.level-2 { counter-reset: cnt-2; list-style: none; } ol.level-2 li:before { content: counter(cnt-1)"."counter(cnt-2,lower-alpha); counter-increment: cnt-2 } ol.level-3 { counter-reset: cnt-3; list-style: none; } ol.level-3 li:before { content: counter(cnt-1)"."counter(cnt-2,lower-alpha)"."counter(cnt-3); counter-increment: cnt-3 } ol li:before { display: inline-block; margin-right: 5px; } 

You can see the demo at: http://jsfiddle.net/audetwebdesign/TJYVf/

The exact style with margin and indentation will depend on your specific layout needs, but this demo illustrates the concept.

Answer 3

Not quite what you are after, but close. Try the following:

 <style> ol { list-style-type:upper-latin; } </style> 

This will print your index element labels as letters.

If you need something like "1a ... 2a ... 2a.a", you will need to use either javascript / server code to create your list in a loop programmatically.