If you’re like me and have ever used HTML in your life, there is a high chance that you must have encountered the <ol> tag that stands for “ordered list” and is used to create a list of intentionally ordered items. There’s another similar “unordered” one and that is <ul>. The <ol> tag is often used with the
li tag added inside the <ol> element makes a new list item in the ordered list. Explore
An ordered list can be ordered either in integer or in roman. You just need to select its type, like this type like this
<ol type="A">
or in CSS add upper-roman, lower-alpha, upper-alpha, lower-roman, none or we can dig deeper with many more values to the list-style or list-style-type more specifically but that’s all for this today.
ol{
list-style: upper-alpha;
}
`<!DOCTYPE html>
ol{
list-style: upper-alpha;
}
Ordered List with Letters
- Coffee
- Tea
- Milk
`
When not to?
<iframe src="https://giphy.com/embed/nk5W3DHgvwLtjSk2tI" width="480" height="480" frameBorder="0" class="giphy-embed" allowFullScreen></iframe><p><a href="https://giphy.com/gifs/showtime-season-2-episode-yellowjackets-nk5W3DHgvwLtjSk2tI">via GIPHY</a></p>
Ordered lists are a great way to make lists where the browser automatically renders the numbers for you and you do not need to write one by one manually for all the items. But don’t you think this snatches your freedom to style the list your way? Yes, you can still stylize it like this:-
<style>
div { margin-bottom:10px;
}
div span { display:inline-flex; justify-content:center; align-items:center; width:25px; height:25px; border-radius:50%; background-color:#000; color:#fff; }
</style> <div> <span>1</span> First Item
</div>
<div> <span>2</span> Second Item
</div>
<div> <span>3</span> Third Item
</div> But then you need to write and put all the numbers inside an element and then write your CSS for that element.
Unlocking CSS counters
<iframe src="https://giphy.com/embed/3ohhwM1yzVLremM6TS" width="480" height="350" frameBorder="0" class="giphy-embed" allowFullScreen></iframe><p><a href="https://giphy.com/gifs/3ohhwM1yzVLremM6TS">via GIPHY</a></p>
Have you ever wondered if there’s a sleeker way to create ordered lists without the traditional <ol> tag? Do you know that you can achieve a similar result without using
- ? It’s a CSS trick, so keep it with you. Just make use of the CSS counter. It’s a versatile tool that allows you to add numbering or lettering to your lists with style. Counters adjust the appearance of content based on its placement in the document. Its value can be incremented by using CSS rules.
Consider the following code:-
<!DOCTYPE html>
<html>
<style>
body{ counter-reset: myCount;
} h1::before{ counter-increment: myCount; content:"Subject " counter(myCount, upper-roman) ". ";
} </style> <body> <h1>Physics</h1> <h1>Chemistry</h1> <h1>Geography</h1> <h1>Mathematics</h1> <h1>Geology</h1> <h1>History</h1> </body>
</html>
Inside the style tag, you must have considered the counter-reset, counter-increment, and content properties. The counter-reset property creates and initializes a specific value to the counter. The property is used inside the parent element whose child elements need to be counted. In our example, we reset the counter inside the <body> tag. We can also specify the initial value of the list. This value is 0 by default, which gets incremented with the first occurrence of the targeted element, hence we get the value 1. We can also use some negative values. And if we use counter-reset:none; then this will disable the counter.
body{ counter-reset: myCount; }
The counter-increment property increments the value of the counter with every occurrence of the child element where it is defined. Note that it is defined under the ::before pseudo-element of the child tag where it was used. Here in this case, it is <h1>. And the value is the counter name. You can also define more than one counter at once with a space-separated list. Like this:
body{ counter-reset: myCount 4 myCount-second; } Where 4 is the initial value for the counter myCount, and 0 for myCount-second. Hence, the list will begin from 5 and 1 for both the counters respectively.
h1::before { counter-increment: myCount; content:"Ingredient " counter(myCount, upper-roman) ". ";
} Finally, the content property lets you insert the content the way you want to see it on the page. Use the counter() CSS function to specify where you want to add the value of the counter to the element. In its first argument, pass the counter name and in the second argument, you can pass the style-type like you did in the
- when you used list-style-type.
s are still relevant
<iframe src="https://giphy.com/embed/3ohhwM1yzVLremM6TS" width="480" height="350" frameBorder="0" class="giphy-embed" allowFullScreen></iframe><p><a href="https://giphy.com/gifs/3ohhwM1yzVLremM6TS">via GIPHY</a></p>
You know,
- should still be used for numbered ordered lists because it’s important to structure HTML using the proper semantics. Semantic markup is important for accessibility and SEO. When you need more control and customization over the styling and numbering of your list items. You can go for the CSS counters when you want to create nested or hierarchical lists, or when you need to style list items dynamically based on their position or hierarchy within the document.
In summary, use HTML lists for basic, well-defined lists, and turn to CSS counters when you need more flexibility and control over the appearance and behavior of your lists.
Now when you’ve unlocked the potential of CSS Counters, you have a versatile tool to add structure and style to your pages. Do you know As I mentioned above you can make use of it in a nested way also? So, go ahead, and take your time to explore. It’s your turn to experiment.
Suggested explorations on the same topic:-