Home > Web Front-end > CSS Tutorial > How to Number Nested Ordered Lists in HTML?

How to Number Nested Ordered Lists in HTML?

Susan Sarandon
Release: 2024-11-15 08:36:02
Original
1038 people have browsed it

How to Number Nested Ordered Lists in HTML?

Numbering Nested Ordered Lists in HTML

To number nested ordered lists in HTML, a combination of CSS and JavaScript can be employed. This approach works consistently in modern browsers, including those that do not support advanced CSS properties.

CSS Approach:

  1. Set the list-style-type of the main ordered list to none using CSS:
ol {
  list-style-type: none;
}
Copy after login
  1. Use the counter-reset and counter-increment CSS properties to generate the numbers. For instance, the first level of nesting should increment a counter named "level1":
ol:before {
  content: counter(level1) ". ";
  counter-increment: level1;
}
Copy after login
  1. For nested ordered lists, reset the counter to start a new sequence:
ol li ol {
  list-style-type: none;
  counter-reset: level2;
}
Copy after login
  1. Generate the numbers for the nested list using the previously incremented counter:
ol li ol li:before {
  content: counter(level1) "." counter(level2) " ";
  counter-increment: level2;
}
Copy after login

jQuery Approach (IE6/7 Support):

  1. Wrap nested list elements with a to apply styling:
$('ol ol').each(function(i, ol) {
  ol = $(ol);
  ol.children('li').each(function(i, li) {
    li = $(li);
    li.prepend('<span>' + level2 + '</span>');
  });
});
Copy after login
  1. Style the elements to provide the desired numbering format:
ol li span {
  margin: 0 5px 0 -25px;
}
Copy after login

By combining these CSS and JavaScript techniques, you can effectively number nested ordered lists in HTML, ensuring consistent formatting across major browsers.

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

source:php.cn
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Latest Articles by Author
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template