CSS ol Sub-Numbering

Making lists for documents with CSS

When it comes to legal documents, it’s common to use numbered lists with nested items. While it’s possible to create such lists manually, it can be more convenient to use CSS.

The code for this is quite simple:

ol { 
  counter-reset: item 
}

ol > li { 
  display: block 
}

ol > li:before {
  content: counters(item, ".") ". ";
  counter-increment: item
}

This will result in a document that looks like:

1. First item
1.1. First sub-item
1.2. Second sub-item
2. Second item
2.1. First sub-item
2.2. Second sub-item

Using CSS for numbered lists with sub-items can make it easier to create and maintain such lists, especially when dealing with long and complex documents.

Here are some more interesting facts about CSS and numbered lists:

1. CSS counters can be used not only for numbering, but also for other purposes such as tracking page numbers, generating unique IDs, or creating automatic labels for figures and tables.
2. CSS counters are not limited to ordered lists. They can also be used in conjunction with other CSS properties to create complex layouts and designs.
3. The counter-reset property can be used to reset the value of a counter at a specific point in the document, which can be useful when creating multiple lists with different numbering schemes.
4. The counter-increment property can be used to increment the value of a counter by a specific amount, allowing for more advanced numbering schemes such as skipping numbers or using non-sequential values.
5. CSS counters are supported in all major web browsers, including Chrome, Firefox, Safari, and Edge, making them a reliable and widely-used feature of modern web development.
6. Overall, CSS counters provide a powerful and flexible way to create and style numbered lists in web documents, and can be a useful tool for designers and developers alike.