Unordered List Inside Ordered List

Unordered List Inside Ordered List refers to a nested structure where an unordered list is placed within an ordered list. It is used when you want to combine numbered items (ordered list) with items that don’t have a particular sequence or hierarchy (unordered list).

Now let's see some of the use cases of the Unordered list inside the Ordered list

1. Custom Numbering with Square Bullets

In this example

• Ordered List: Sections are numbered using Roman numerals, prefixed with "Section" and colored blue.
• Unordered List: Custom orange square bullets are used instead of the default, and the list is indented.
• Nested Lists: Unordered lists inside the ordered list show subtopics with custom bullets.

2. Customize bullets and numbers

In this example

• HTML Structure: Create an ordered list (<ol>) and nest unordered lists (<ul>) inside specific <ol> items to form a hierarchy.
• CSS Customization: Use list-style-type to define the numbering style for <ol> (e.g., upper-roman) and bullet style for <ul> (e.g., square).
• Indentation: Adjust margin and padding in CSS for proper alignment of nested lists.
• Styling Flexibility: Easily modify list styles or colors for bullets and numbers to fit design needs.

3. Adding custom bullet points or numbers.

We are creating a nested list where an unordered list (<ul>) with custom bullet points (e.g., stars or squares) is placed inside an ordered list (<ol>) with custom numbering (e.g., Roman numerals or alphabets).

In this example

• Ordered List: Uses Roman numerals (upper-roman) for numbering.
• Unordered List: Default bullets replaced with custom stars (★) using ::before.
• Styling: Colors, margins, and bullet types can be adjusted for visual appeal.