How to Create Nested Ordered Lists in HTML with Consistent Numbering?

Nested Ordered Lists in HTML with Numbering

When creating nested ordered lists in HTML, you may encounter the issue where the inner list starts numbering from 1 again. This can disrupt the proper flow of the list. To address this, the following CSS and jQuery techniques can be employed:

CSS Approach

For browsers that support CSS styling, you can use the counter-reset property to reset the numbering for each level of the list. The counter-increment property increments the counter for each list item.

html body ol {
  list-style-type: none;
  counter-reset: level1;
}

ol li:before {
  content: counter(level1) ". ";
  counter-increment: level1;
}

ol li ol {
  list-style-type: none;
  counter-reset: level2;
}

ol li ol li:before {
  content: counter(level1) "." counter(level2) " ";
  counter-increment: level2;
}

jQuery Approach

For older browsers like IE6/7 that do not support the counter-reset property, you can use jQuery to insert the numbering manually. This method involves prepending each item with a element containing the respective number.

$(document).ready(function() {
  if ($('ol:first').css('list-style-type') != 'none') { /* For IE6/7 only. */
    $('ol ol').each(function(i, ol) {
      ol = $(ol);
      var level1 = ol.closest('li').index() + 1;
      ol.children('li').each(function(i, li) {
        li = $(li);
        var level2 = level1 + '.' + (li.index() + 1);
        li.prepend('<span>' + level2 + '</span>');
      });
    });
  }
});

By implementing either of these approaches, you can achieve nested ordered lists with consistent numbering, providing a more organized and structured presentation of your content.

The above is the detailed content of How to Create Nested Ordered Lists in HTML with Consistent Numbering?. For more information, please follow other related articles on the PHP Chinese website!