Unordered List Inside Ordered List
Last Updated :
23 Jul, 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.
