Answering a Reader’s Question About Nested Lists

Here’s a rewritten version of the article, preserving its technical insights and clarity while improving flow and readability:

—

🖼️ 

A few days ago, while sifting through our inbox full of crypto scams and spam, one reader’s question stood out — a practical issue involving nested HTML lists.

> I’ve run into a list-numbering problem that seems pretty common, but I haven’t found a working solution. If one of your brilliant minds can crack this, I bet a lot of people will benefit.

As someone who recently wrote a full guide on CSS counters, I was intrigued. The reader continued:

> I’m trying to create a nested list with five levels, each with a different numbering style — like those used in legal documents or condo bylaws. The levels go like this:
>
> 1. Decimal (1.)
> 2. Lower-alpha ((a))
> 3. Lower-roman ((i))
> 4. Upper-alpha ((A))
>
> I’d be happy with a solution that handles just three levels.

Challenge accepted!

The Goal

The reader wants a multi-level list where each nested level uses a different numbering format. Here’s an example of what that might look like:

8 The strata corporation must repair and maintain all of the following:
(a) common assets of the strata corporation;
(b) common property that has not been designated as limited common property;
(c) limited common property, but the duty to repair and maintain it is restricted to
(i) repair and maintenance that in the ordinary course of events occurs less often than once a year, and
(ii) the following, no matter how often the repair or maintenance ordinarily occurs:
(A) the structure of a building;
(B) the exterior of a building;
(C) chimneys, stairs, balconies and other things attached to the exterior of a building;
(D) doors, windows and skylights on the exterior of a building or that front on the common property;

At first glance, it seems straightforward — but as we’ll see, it has its quirks.

The Ugly Way

My initial instinct was to brute-force it: write the HTML using

and
1. tags, then assign list-style-type to each
   based on its nesting level.

   Here’s what that looked like:

   CSS:

   ol {
   list-style-type: decimal;
   }

   ol ol {
   list-style-type: lower-alpha;
   }

   ol ol ol {
   list-style-type: lower-roman;
   }

   ol ol ol ol {
   list-style-type: upper-alpha;
   }

   This technically works, but it’s not elegant. The CSS gets repetitive and hard to maintain.

   The Better Way: CSS Nesting

   Thankfully, CSS nesting is now widely supported. This allows us to write cleaner, more structured styles that mirror the HTML hierarchy.

   CSS:

   ol {
   list-style-type: decimal;

   ol {
   list-style-type: lower-alpha;

   ol {
   list-style-type: lower-roman;

   ol {
   list-style-type: upper-alpha;
   }
   }
   }
   }

   This version is more readable and keeps all list styles in one place. It’s also easier to update or extend.

   But There’s a Catch: Legal Formatting

   In legal documents, formatting isn’t just about aesthetics — it’s about accuracy. Parentheses around list markers (like (A) or (ii)) are required and not just decorative. Our current CSS solution doesn’t include those parentheses.

   Previously, the only way to achieve that was by manually setting counters and surrounding them with parentheses using content and counter() in CSS — a tedious and messy solution.

   Enter @counter-style

   Now, we have a better tool: the @counter-style at-rule. It lets us define custom counter styles with specific prefixes and suffixes.

   Here’s an example:

   @counter-style my-counter-style {
   system: extends decimal;
   prefix: “- “;
   suffix: “: “;
   }

   ol {
   list-style-type: my-counter-style;
   }

   For our legal-style list, we’ll need four custom counter styles:

   – A decimal without a trailing period
   – A lower-alpha with parentheses
   – A lower-roman with parentheses
   – An upper-alpha with parentheses

   CSS:

   @counter-style trimmed-decimal {
   system: extends decimal;
   suffix: ” “;
   }

   @counter-style enclosed-lower-alpha {
   system: extends lower-alpha;
   prefix: “(“;
   suffix: “) “;
   }

   @counter-style enclosed-lower-roman {
   system: extends lower-roman;
   prefix: “(“;
   suffix: “) “;
   }

   @counter-style enclosed-upper-alpha {
   system: extends upper-alpha;
   prefix: “(“;
   suffix: “) “;
   }

   Then apply them

   ---

   Discover more from WIREDGORILLA

   Subscribe to get the latest posts sent to your email.

   Type your email…

   Subscribe