Ordered List Inside Unordered List
Last Updated :
07 Jan, 2025
Improve
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.
<!--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
<!--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
<!--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.
- The unordered list (
3. Implementing Custom Bullet Points or Numbers.
<!--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.
<!--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.
<!--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.
<!--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
<!--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>
<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.
<!--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.
