Mutilevel Lists

This is to create a multi-level list of the sort more often seen in print media - such as an outline or a set of instructions.

To create a multilevel list in HTML, nest each list level into a parent list item. Style the levels with css (ideally with classes) to create a custom style list.

The css list item <li> property sets the position for the list item.

The css list-style-type property sets the marker (bullet) style for the list-item.

Browser Default Styles

Unordered List

• First
• Second
  • Sub of Second
  • Another Sub
    • Sub of Another Sub
    • Another Sub Sub
• Third
• Fourth

Ordered List

1. First
2. Second
   1. Sub of Second
   2. Another Sub
      1. Sub of Another Sub
      2. Another Sub Sub
3. Third
4. Fourth

Inline Styling

This list changes the style by declaring the list-style-type for the list level in the html.

<ol style="list-style-type: lower-alpha;">

1. First
2. Second
   1. Sub of Second
   2. Another Sub
3. Third
4. Fourth

css Styling

By changing the default styling, any style of list can be created to match a standard set of list levels.

Common CSS list-style-type values

• upper-roman - Uppercase roman numeral starting with "I.".
• lower-roman - Lowercase roman numeral starting with "i.".
• upper-alpha - Uppercase alphabetic lettering starting with "A." (aka upper-latin).
• lower-alpha - Lowercase alphabetic lettering starting with "a." (aka lower-latin).
• decimal - Decimal number starting with "1.".
• decimal-leading-zero - Decimal number beginning with 0 (e.g., 01, 02, 03, etc.).

The bullets may vary by browser.

The common appearance is:

• disc - Small solid circle
• circle - Small empty circle
• square - Solid square
• none - Show nothing

A Sample List using decimal (numbers), followed by lower-alpha, followed by lower-roman.

1. First
2. Second
   1. Sub of Second
   2. Another Sub
   1. Sub of Another Sub
   2. Another, Another Sub
3. Third
4. Fourth

Note that a negative margin has been used to reduce the indent of the lower level lists.

Styling with css Custom Properties

This uses a set of custom properties to select the css list styles:

Then build the list by declaring the variable that corrisponds to the style to be set for that level.
To change the list style, change the custom property (between the parentheses).

• .l1 {
    list-style-type: var(--ur);
  }
• .l1 {
    list-style-type: var(--lr);
  }

A Sample List Styled as a Standard Outline

1. First
2. Second
   1. Sub of Second
   2. Another Sub
   1. Sub of Another Sub
   2. Another, Another Sub
3. Third
4. Fourth

Five Level Ordered List Using css Custom Properties

This html can be used for a template.

1. First Level #1
2. First Level #2
   1. Second Level #1
   2. Second Level #2
      1. Third Level #1
      2. Third Level #2
         1. Fourth Level #1
         2. Fourth Level #2
            1. Fifth Level #1
            2. Fifth Level #2