Ordered List Inside Unordered List

Last Updated : 07 Jan, 2025

An ordered list inside an unordered list is a hierarchical list structure where an ordered list (<ol>) is nested within an unordered list item (<li>) of a parent unordered list (<ul>). This allows you to combine both ordered (numbered) and unordered (bulleted) list formats in a single structure.

HTML

<!--Driver Code Starts-->
<html>
<head></head>
<body>
    <h2>Welcome To GFG</h2>
<!--Driver Code Ends-->

    <ul>
        <li>Item 1</li>
        <li>Item 2
            <ol>
                <li>Sub-item 1</li>
                <li>Sub-item 2</li>
                <li>Sub-item 3</li>
            </ol>
        </li>
        <li>Item 3</li>
    </ul>

<!--Driver Code Starts-->
</body>
</html>
<!--Driver Code Ends-->

In this example

It demonstrates an ordered list (<ol>) nested inside an unordered list (<ul>).
Within the unordered list, Item 2 contains an ordered list with three sub-items: Sub-item 1, Sub-item 2, and Sub-item 3.
This nesting allows combining bullet points (unordered) and numbered points (ordered) for hierarchical data representation.

1. Nested multiple ordered lists inside an unordered list

HTML

<!--Driver Code Starts-->
<html>
<head></head>
<body>
    <h2>Welcome To GFG</h2>
<!--Driver Code Ends-->

    <ul>
        <li>Shopping List
            <ol>
                <li>Eggs</li>
                <li>Bread</li>
            </ol>
        </li>
        <li>To-Do List
            <ol>
                <li>Complete project</li>
                <li>Go for a run</li>
            </ol>
        </li>
    </ul>

<!--Driver Code Starts-->
</body>
</html>
<!--Driver Code Ends-->

In this example

An unordered list with two items:
- Shopping List (with items Eggs and Bread).
- To-Do List (with items Complete project and Go for a run).
Each list under "Shopping List" and "To-Do List" is ordered.

2. Customize Bullets and Numbers using CSS

HTML

<!--Driver Code Starts-->
<html>
<head></head>
<body>
    <h2>Welcome To GFG</h2>
<!--Driver Code Ends-->

    <style>
        ul {
            list-style-type: square;
        }
    </style>
    <ul>
        <li>Fruits
            <ol>

<!--Driver Code Starts-->
                <li>Apple</li>
                <li>Banana</li>
                <li>Orange</li>
            </ol>
        </li>
    </ul>
</body>
</html>
<!--Driver Code Ends-->

In this example

Unordered List (<ul>): Contains one item with a nested ordered list (<ol>).
CSS Styling:
- The unordered list (<ul>) uses square bullets.
- The ordered list (<ol>) uses decimal (numbered) style.

3. Implementing Custom Bullet Points or Numbers.

HTML

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

    <style>
        ul {
            list-style-type: none;
        }
        ol {
            list-style-type: none;
            counter-reset: list;
        }
        ol li {
            counter-increment: list;
        }
        ol li::before {
            content: counter(list) ". ";
        }
    </style>

<!--Driver Code Starts-->
</head>
<body>
    <h2>Welcome To GFG</h2>
    <ul>
        <li>Tasks
            <ol>
                <li>C++</li>
                <li>Java</li>
            </ol>
        </li>
    </ul>
</body>
</html>
<!--Driver Code Ends-->

In this example

An unordered list with one item "Tasks", containing a nested ordered list.
CSS:
- Removes bullets from both unordered and ordered lists.
- Uses CSS counters to custom-number the ordered list items (e.g., "1. C++", "2. Java").

4. Prevent list items from being indented in a nested ordered list.

HTML

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

    <style>
        ol {
            margin-left: 0;
            padding-left: 0;
        }
    </style>

<!--Driver Code Starts-->
</head>
<body>
    <h2>Welcome to GFG!</h2>
    <ul>
        <li>Books
            <ol>
                <li>The Hobbit</li>
                <li>Harry Potter</li>
            </ol>
        </li>
    </ul>
</body>
</html>
<!--Driver Code Ends-->

In this example

An unordered list with one item "Books", containing a nested ordered list.
CSS removes the left margin and padding from the ordered list.

5. Handle nested ordered lists with complex content.

HTML

<!--Driver Code Starts-->
<html>
<head></head>
<body>
    <h2>Welcome To GFG</h2>
<!--Driver Code Ends-->

    <ul>
        <li>Programming Languages
            <ol>
                <li><a href="https://www.javascript.com">JavaScript</a></li>
                <li>Python
                    <ol>
                        <li><a href="https://www.python.org">Official Site</a></li>
                    </ol>
                </li>
                <li>C++</li>
            </ol>
        </li>
    </ul>

<!--Driver Code Starts-->
</body>
</html>
<!--Driver Code Ends-->

6. The nested ordered list display with Roman numerals.

HTML

<!--Driver Code Starts-->
<html>
<head></head>
<body>
    <h2>Welcome To GFG</h2>
<!--Driver Code Ends-->

    <ul>
        <li>Ancient Civilizations
            <ol type="I">
                <li>Rome</li>
                <li>Greece</li>
                <li>Egypt</li>
            </ol>
        </li>
    </ul>

<!--Driver Code Starts-->
</body>
</html>
<!--Driver Code Ends-->

7. Style only the nested ordered list

HTML

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

    <style>
        ol.sublist {
            list-style-type: upper-roman;
            color: green;
        }
    </style>

<!--Driver Code Starts-->
</head>
<body>
    <ul>
        <li>GeeksforGeeks
            <ol class="sublist">
                <li>DSA</li>
                <li>Java fullstack </li>
                <li>Python </li>
            </ol>
        </li>
    </ul>
</body>
</html>
<!--Driver Code Ends-->

8. Nest an ordered list inside a description list

HTML

<html>
<head></head>
<body>
    <dl>
        <dt>Recipe</dt>
        <dd>
            Steps to make a sandwich:
            <ol>
                <li> bread.</li>
                <li> slice.</li>
                <li>fillings.</li>
                <li> slice on top.</li>
            </ol>
        </dd>
        <dt>Travel Checklist</dt>
        <dd>
            Steps before traveling:
            <ol>
                <li>Pack your luggage.</li>
                <li>Check your travel documents.</li>
                <li>Book transportation.</li>
            </ol>
        </dd>
    </dl>
</body>
</html>

In this example

The <dl> element defines the description list.
The <dt> tag specifies the term (e.g., " Steps to make a sandwich:").
The <dd> tag contains the description, which includes the <ol> tag to create a sequential (ordered) list of steps.

9. Style only nested ordered list.

HTML

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

    <style>
        dl {
            font-family: Arial, sans-serif;
            color: #333;
        }
        dl dd ol {
            background-color: #f0f8ff;
            padding: 10px;
            list-style-type: upper-roman;
        }
        dl dd ol li {
            color: #0056b3;
        }
    </style>

<!--Driver Code Starts-->
</head>
<body>
    <dl>
        <dt>Gate Course</dt>
        <dd>
            Follow these steps:
            <ol>
                <li>Maths.</li>
                <li>DBMS.</li>
                <li>OS.</li>
                <li>CN.</li>
            </ol>
        </dd>
    </dl>
</body>
</html>
<!--Driver Code Ends-->

In this example

Description List (<dl>): Defines the term "Gate Course" and its description.
Ordered List (<ol>): Lists subjects like Maths, DBMS, OS, and CN with Roman numerals.
CSS: Styles the list with Arial font, a light blue background, and blue-colored list item

Use Cases for Nested Lists

Multi-level Navigation Menus: You can use an ordered list (<ol>) inside an unordered list (<ul>) for complex multi-level navigation menus, where top-level categories are unordered and sub-categories have a numbered list.
FAQs with Step-by-Step Answers: Using nested ordered lists inside unordered lists helps organize FAQs where each question has a list of numbered steps or instructions.
Product Categories with Subcategories: Nested ordered lists inside unordered lists are used to display product categories with numbered items or subcategories. This structure helps show the relationship between categories and their products in a catalog.
Task Lists with Subtasks: Nested ordered lists inside unordered lists are helpful when creating task lists that have numbered steps under each main task.
Instruction Manuals with Sub-steps: In instructional content, an unordered list can represent high-level steps, while ordered lists nested inside can represent the sub-steps or actions required to complete the task.

Ordered List Inside Description List

tanmxcwi

Improve

Article Tags :

Ordered List Inside Unordered List

1. Nested multiple ordered lists inside an unordered list

2. Customize Bullets and Numbers using CSS

3. Implementing Custom Bullet Points or Numbers.

4. Prevent list items from being indented in a nested ordered list.

5. Handle nested ordered lists with complex content.

6. The nested ordered list display with Roman numerals.

7. Style only the nested ordered list

8. Nest an ordered list inside a description list

9. Style only nested ordered list.

Use Cases for Nested Lists

Similar Reads

Thank You!

What kind of Experience do you want to share?