Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
Physics
Chemistry
Biology
Mathematics
English
Economics
Psychology
Social Studies
Fashion Studies
Legal Studies
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
How to Display an Ordered List with Nested Counters?
A list is a record of short pieces of related information used to display the data or any information in web pages in an ordered or unordered form. Lists are used to group related pieces of information together so that they are clearly associated with one another and easy to read. They are beneficial from a structural point of view because they aid in the creation of a well-structured, more accessible, and easy-to-maintain document. They are also useful because they provide specialized elements to which CSS styles can be applied.
HTML lists enable web developers to organize a collection of related items into lists. There are three types of lists in HTML, each with its own function and meaning.
Unordered list — A collection of related items that are not arranged in any particular order.
Ordered list — A collection of related items that are arranged in any particular order.
Description list— A list of terms and their descriptions.
Nested List
A nested list or sub list is a list within a list. The key to correctly formatting nested lists in HTML is to recognize that the sub list is a child of a list item rather than a list itself.
Example
We can create a simple nested ordered list by following the example below.
<!DOCTYPE html>
<html>
<body>
<h3>A Nested Ordered List</h3>
<h4>Icecreams</h4>
<ol>
<li>Chocolate
<ol>
<li>Chocolate Chips</li>
<li>Belgian Dark Chocolate</li>
</ol>
</li>
<li>Vanilla</li>
<li>Strawberry</li>
</ol>
</body>
</html>
However, the above method does not create an ordered list with nested counters.
We can display an ordered list with nested counters like 1.1, 1.2 instead of 1, 2 by using the CSS display property. It specifies how the components (div, hyperlink, heading, list etc.) will be placed on the web page. This property, as the name implies, is used to define how different parts of a web page will be displayed.
Syntax
display: value;
In this snippet, we will discuss two methods for creating an ordered list with nested counters using the display property.
Using ‘ block ’ Value of Display Property
An element with the display property set to block begins on a new line and occupies the entire screen width. For such elements, we can specify their width and height. Elements that are at the block level by default include <div>, <section>, <p>, and many others. We can make the span from the previous HTML code behave like a block-level element by setting it to block display.
Example
In this example we will use the block value of the display property for the <li> element along with the content and counter-increment properties.
<!DOCTYPE html>
<html>
<head>
<title>How to Display an Ordered List with Nested Counters?</title>
<style>
div{
background-color:mistyrose;
width:300px;
padding:5px;
}
ol {
counter-reset: item;
}
li {
display: block;
color: purple;
font-size:17px;
}
li:before {
content: counters(item, ".") "." " ";
counter-increment: item;
}
</style>
</head>
<body>
<h3>Beverages</h3>
<div>
<ol>
<li>Coffee
<ol>
<li>Frappe</li>
<li>Latte</li>
<li>Cappuccino</li>
</ol>
</li>
<li>Smoothie
<ol>
<li>Mango Smoothie</li>
<li>Banana Smoothie</li>
</ol>
</li>
<li>Mojito
<ol>
<li>Classic Mint Mojito</li>
<li>Strawberry Mojito</li>
<li>Blueberry Mojito</li>
</ol>
</li>
</ol>
</div>
</body>
</html>
Using ‘ table ’ Value of the Display Property
We rarely use table value these days, but it is still useful to know. It was more useful in the past because we used it for layouts before the advent of floats, Flex, and Grid. Setting the display to table causes the element to behave like a table. So, we can create a copy of an HTML table without using the table element and corresponding elements like th, tr and td.
Example
In this example, we will change the <li> element's display to "table" and use the "table-cell" value for the:before pseudo-element.
<!DOCTYPE html>
<html>
<head>
<title>How to Display an Ordered List with Nested Counters?</title>
<style>
div{
background-color:rosybrown;
color:beige;
width:250px;
padding:10px;
}
ol {
counter-reset: item;
padding:2px;
}
li {
display: table;
counter-increment: item;
margin-top:2px;
}
li:before {
content: counters(item, ".") ". ";
display: table-cell;
padding-right: 10px;
}
li li:before {
content: counters(item, ".") " ";
}
</style>
</head>
<body>
<h3>Film Genres</h3>
<div>
<ol>
<li>Comedy
<ol>
<li>Romantic Comedy</li>
<li>Action Comedy</li>
</ol>
</li>
<li>Drama
<ol>
<li>Legal Drama</li>
<li>Political Drama</li>
<li>Medical Drama</li>
</ol>
</li>
<li>Thriller
<ol>
<li>Psychological Thriller</li>
<li>Crime Thriller</li>
</ol>
</li>
</ol>
</div>
</body>
</html>
271 Views
