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

Question

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

<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 would result in:

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

I know it is possible to use counters in CSS to do this with numbers, but is there a way to do it with letters as well?

Answer 1

How about a little jQuery to add the indices :

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 of doing it using standard CSS 2.1.

The HTML is similar to yours except I 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 the CSS, I define 3 custom counters (cnt-1, cnt-2, cnt-3) and use the content property to display the 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 styling with margin and padding will depend on your specific layout needs, but this demo illustrate the concept.