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 that stands for “list-items”. Each <li> tag added inside the <ol> element makes a new list item in the ordered list.
.
Explore <ol> 😎
An ordered list can be ordered either in integer or in roman. You just need to select its type, like this:-
<ol type="A">
or like this
ol{
list-style: upper-alpha;
}
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 now.
Just a simple ordered list:-
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:-
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 ⚡
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 <ol> 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:-
here is the output:-
Inside the style tag, you must have noticed the counter-reset, counter-increment, and content properties. Let's have a closer look at each of them.
.
CSS counter-reset property
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;
}
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.
.
CSS counter-increment property
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.
h1::before {
counter-increment: myCount;
content:"Subject " counter(myCount, upper-roman) ". ";
}
.
CSS content property and the counter() function
Finally, the content property lets you insert the content the way you want to see it on the page. Use the CSS counter() function to specify where you want to show the count in 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 <ol> when you used list-style-type.
content:"Subject " counter(myCount, upper-roman) ". ";
-
Relevance of the <ol>
You know, <ol> 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, 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 you can go for the CSS counters.
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. As I mentioned earlier, you can also use it in a nested way. So, go ahead, and take your time to explore. It's your turn to experiment.
Suggested explorations on the same topic:-
- https://www.w3schools.com/css/css_counters.asp
- https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_counter_styles/Using_CSS_counters
- https://css-tricks.com/almanac/properties/c/counter-reset/
- https://blog.logrocket.com/styling-numbered-lists-with-css-counters/
- https://www.freecodecamp.org/news/numbering-with-css-counters/
- https://www.samanthaming.com/tidbits/53-css-counter/
Top comments (2)
Incredible work done.
Thank you so much. It means a lot....