Table of Contents
Ordered lists are useful in HTML because they allow you to create a list of items that have a counter associated with them.
However, sometimes you need to nest ordered lists within each other, but want to keep the counters separate.
In this post, we'll learn how to display nested ordered lists with counters.
How to create a nested ordered list with counters
To start off, let's create a basic ordered list.
HTML<ol>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ol>
- HTML
As you can tell if you try to run the example above, there's nothing special going on it, just a basic list.
But now let's see what happens if we try to nest ordered lists.
HTML<ol>
<li>Item 1
<ol>
<li>Item 1.1</li>
<li>Item 1.2</li>
<li>Item 1.3</li>
</ol>
</li>
<li>Item 2
<ol>
<li>Item 2.1</li>
<li>Item 2.2</li>
<li>Item 2.3</li>
</ol>
</li>
<li>Item 3</li>
</ol>
- HTML
The browser will automatically create separate counters for each nested list.
However, with some simply CSS, we can create a counter that uses both the parent and children counter together, so you always know what level you're on:
HTML<ol>
<li>Item 1
<ol>
<li>Item 1.1</li>
<li>Item 1.2</li>
<li>Item 1.3</li>
</ol>
</li>
<li>Item 2
<ol>
<li>Item 2.1</li>
<li>Item 2.2</li>
<li>Item 2.3</li>
</ol>
</li>
<li>Item 3</li>
</ol>
CSSol {
counter-reset: item;
}
li {
display: block;
counter-increment: item;
}
li:before {
content: counters(item, ".") " ";
}
- HTML
- CSS
Now you can see that the list items go from:
BASH1. Item 1.1
to
BASH1.1 Item 1.1
Conclusion
In this post, we learned how to create a nested ordered list with counters that display both the parent and child counter.
Simply use a bit of CSS to make the counters display the parent and child counter together when they are nested.
Thanks for reading!
- Getting Started with Electron
- How to Serve Static Files with Nginx and Docker
- How to Set Up Cron Jobs in Linux
- How to deploy a Deno app using Docker
- How to deploy a MySQL Server using Docker
- How to deploy an Express app using Docker
- Getting Started with Sass
- Build a Real-Time Chat App with Node, Express, and Socket.io
- Getting Started with Moment.js
- Using Push.js to Display Web Browser Notifications
- Getting Started with Vuex: Managing State in Vue
- Setting Up a Local Web Server using Node.js