DEV Community

Cover image for Leveling Up: From HTML Lists to CSS Counters
Harshita Sharma D
Harshita Sharma D

Posted on

Leveling Up: From HTML Lists to CSS Counters

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">
Enter fullscreen mode Exit fullscreen mode

or like this

ol{
   list-style: upper-alpha;
  }
Enter fullscreen mode Exit fullscreen mode

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.

The HTML code for simple ol

Just a simple ordered list:-

The output for the HTML code

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.

I'll figure out something giphy

via GIPHY

But don’t you think this snatches your freedom to style the list your way? Yes, you can still stylize it like this:-

List using span

But then you need to write and put all the numbers inside an element and then write your CSS for that element.

Output of the span list

.

Unlocking CSS Counters ⚡

unlock cock toy say what darigloo giphy

via GIPHY

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:-

CSS counter code

here is the output:-

CSS counter code 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; 
}
Enter fullscreen mode Exit fullscreen mode

You can also define more than one counter at once with a space-separated list. Like this:-

body{
  counter-reset: myCount 4 myCount-second; 
}

Enter fullscreen mode Exit fullscreen mode

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) ". ";
}

Enter fullscreen mode Exit fullscreen mode

.

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) ". ";
Enter fullscreen mode Exit fullscreen mode

-

Relevance of the <ol>

It's important giphy

via GIPHY

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:-

Top comments (2)

Collapse
 
shivanshushady profile image
Shivanshu Sharma

Incredible work done.

Collapse
 
harshitads44217 profile image
Harshita Sharma D

Thank you so much. It means a lot....