Customize nested numbered list styles

By default, numbered lists with nested/indented items will display with the same numeric format as the main list. You can use custom CSS styles to globally set how your nested numbered list items display. This can be a great way to guarantee that all numbered lists follow your official/branded guidelines for numbered list styles.

Set different levels of nested items to different display types

You might want to keep your main numbers as the standard decimal (1, 2, 3), but the second level to be lower-case letters (a, b, c), and the third level to be lower-case Roman numerals (i, ii, iii). For example:

To achieve the above styles:

1. Go to Settings > Style.
2. Go to Custom CSS.
3. Add this Custom CSS:

   /* -- Nested List  -- */
   
   /* Set the first layer of list items to regular numeric decimals */
   .hg-article-body ol {
       list-style-type: decimal;
   }
   
   /* Set the second layer of list items to lowercase alphabetic */
   .hg-article-body ol > li > ol {
       list-style-type: lower-alpha;
   }
   
   /* Set the third layer of list items to lowercase Roman numerals */
   .hg-article-body ol > li > ol > li > ol {
       list-style-type: lower-roman;
   }
   

4. Click Save.

Looking for a particular number format? See the W3 Schools page on CSS list-style-types for additional options.

Use nested numbers with counters

You might want to use all numbers, but have each indented layer add a .+number onto it. For example:

Nested Numbered List with Counters

To achieve the above styles, you can use a counter within the numbered list, so that it numbers the 1.x and 1.1.x strings, etc., based on the count and position of the list items:

1. Go to Settings > Style.
2. Go to Custom CSS.
3. Add this Custom CSS:

   /* Styles for formatting sub-ordered-list-items with 1.1., 1.1.1., etc.)*/
   	
   /* First, set all numbered lists to use counter-reset */
   .hg-article-body ol {
         counter-reset: item;
   }
   
   /* Display all list items in a numbered list in block display */
   .hg-article-body ol>li {
         display: block;
   }
   
   /* Use a counter that checks the number of items and adds a "." between them and ends with ". " */
   .hg-article-body ol>li:before { 
         content: counters(item, ".") ". "; 
         counter-increment: item;
   }

4. Click Save.