Unordered List Inside Ordered List

Last Updated : 14 Jan, 2025

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).

HTML

<ol>
    <li>First Step
        <ul>
            <li>Substep A</li>
            <li>Substep B</li>
        </ul>
    </li>
    <li>Second Step
        <ul>
            <li>Substep X</li>
            <li>Substep Y</li>
        </ul>
    </li>
</ol>

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

1. Custom Numbering with Square Bullets

HTML

<!--Driver Code Starts-->
<html>
<head>
<!--Driver Code Ends-->
    <style>
        ol {
            counter-reset: section;
            list-style-type: none;
        }
        ol>li {
            counter-increment: section;
            margin: 10px 0;
        }
        ol>li::before {
            content: "Section " counter(section, upper-roman) ". ";
            font-weight: bold;
            color: #3f51b5;
        }
        ul {
            list-style-type: none;
            padding-left: 20px;
        }
        ul>li {
            position: relative;
            margin: 8px 0;
        }
        ul>li::before {
            content: "\25A0";
            position: absolute;
            left: -20px;
            top: 0;
            font-size: 18px;
            color: #ff5722;
        }
    </style>
<!--Driver Code Starts-->
</head>
<body>
    <ol>
        <li>
            Introduction
            <ul>
                <li>What is the topic?</li>
                <li>Why is it important?</li>
            </ul>
        </li>
        <li>
            Body
            <ul>
                <li>Main argument</li>
                <li>
                    Supporting evidence
                    <ul>
                        <li>Example 1</li>
                        <li>Example 2</li>
                    </ul>
                </li>
            </ul>
        </li>
    </ol>
</body>
</html>
<!--Driver Code Ends-->

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

HTML

<!--Driver Code Starts-->
<html>
<head>
<!--Driver Code Ends-->

    <style>
        ol {
            list-style-type: upper-roman;
            margin: 20px;
            padding-left: 40px;
        }
        ul {
            list-style-type: square; 
            margin: 10px 0 10px 20px; 
        }
    </style>

<!--Driver Code Starts-->
</head>
<body>
    <h1>Customized Nested Lists</h1>
    <ol>
        <li>Step One
            <ul>
                <li>Sub-step A</li>
                <li>Sub-step B</li>
            </ul>
        </li>
        <li>Step Two</li>
        <li>Step Three
            <ul>
                <li>Sub-step C</li>
                <li>Sub-step D</li>
            </ul>
        </li>
    </ol>
</body>
</html>
<!--Driver Code Ends-->

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).

HTML

<!--Driver Code Starts-->
<html>
<head>
<!--Driver Code Ends-->

    <style>
        ol {
            list-style-type: upper-roman; 
            margin: 20px;
            padding-left: 40px;
        }
        ul {
            list-style-type: square; 
            margin: 10px 0 10px 20px;
        }
        ul.custom-bullets li::before {
            content: '★'; 
            margin-right: 8px;
            color: orange;
        }
    </style>

<!--Driver Code Starts-->
</head>
<body>
    <h1>Nested Lists with Custom Bullets</h1>
    <ol>
        <li>Step One</li>
        <li>Step Two
            <ul class="custom-bullets">
                <li>Sub-step A</li>
                <li>Sub-step B</li>
            </ul>
        </li>
        <li>Step Three</li>
    </ol>
</body>
</html>
<!--Driver Code Ends-->

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.

tanmxcwi

Improve

Article Tags :

Unordered List Inside Ordered List

1. Custom Numbering with Square Bullets

2. Customize bullets and numbers

3. Adding custom bullet points or numbers.

Similar Reads

Thank You!

What kind of Experience do you want to share?