Numbering Nested Lists Past the Defaults

A reader wrote in asking about a nested list numbering problem that comes up in legal-style documents: a five-level list where each level uses a different marker style. The pattern, as demonstrated with three levels, starts with 1. for the top level, then (1), then (a), with lower-Roman (i) and upper-alpha (A) for deeper levels if needed.

There are a few ways to get these mixed markers on nested lists. The most direct approach is styling by depth, but a cleaner solution leverages modern CSS features for maintainability, and adding a small HTML fallback covers the no-CSS case.

Styling List Levels by Selector or by Nesting

The simplest implementation targets each ol by counting its ol ancestors and assigns the desired list-style-type to each depth. This works, but it requires writing four separate, top-level selectors. Once CSS nesting is available, the same result can be expressed more compactly by nesting each level's rule inside the previous one. The nested structure mirrors the HTML, keeps each list's style rules co-located, and reads clearly.

Merely switching the marker type is insufficient for legal documents. Markers such as (A) or (ii) include their parentheses as part of the numbering format, not as decoration. Writing those characters into the HTML content would be tedious and fragile; instead, the @counter-style at-rule handles it cleanly.

The rule can extend a predefined built-in style like decimal or lower-alpha and append a different suffix or prefix. For this document, four custom counter styles are needed:

  • a decimal marker without a trailing dot;
  • a lowercase alpha marker enclosed in parentheses;
  • a lowercase Roman marker enclosed in parentheses;
  • an uppercase alpha marker enclosed in parentheses.

These custom styles are declared in a few @counter-style rules, then the previously used list-style-type values in the nested selectors are replaced with the new style names.

Fallback via the HTML type Attribute

A legal document's list format can be significant if styling fails — for instance, when stylesheets are slow to load or when viewed on an older browser where nesting or @counter-style lacks support. Without CSS, all markers would default to decimal, and sublist levels would only be distinguished by padding, which can be misleading in a formal document.

The HTML type attribute on ol elements provides a CSS-independent way to set the marker scheme. Unlike its CSS counterpart, it is not deprecated for ordered lists, and its valid values cover the requirements here:

  • "1" for decimal numbers (the default);
  • "a" for lowercase alphabetic markers;
  • "A" for uppercase alphabetic markers;
  • "i" for lowercase Roman numerals;
  • "I" for uppercase Roman numerals.

Assigning the appropriate type to each ordered list in the markup guarantees that the numbers stay correct even when CSS never arrives. Whether this step is worth the effort depends on how large and how static the document is, but for conditional and bylaw documents that rarely change, it is a minor addition for full robustness.