Leveling Up: From HTML Lists to CSS Counters
Tags: webdev, css, html, tutorial
Published: 2024-05-05 10:12:25

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. 


![The HTML code for simple ol](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/o9rksasvcxjmbgc9e6bx.png)

Just a simple ordered list:- 

![The output for the HTML code](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/8pw8kwqq4v9oqcfw8ojw.png)


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](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/47pirx3z8s345zxjhmic.gif)
<iframe src="https://giphy.com/embed/nk5W3DHgvwLtjSk2tI" width="120" height="120" frameBorder="0" class="giphy-embed" allowFullScreen></iframe><p><a href="https://giphy.com/gifs/showtime-season-2-episode-yellowjackets-nk5W3DHgvwLtjSk2tI" target="_blank" rel="noopener">via GIPHY</a></p>

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](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/0zvufrygq16xiexcahqn.png)


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](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/8vtl6ei368k2mul9jeue.png) 

.
## Unlocking CSS Counters ⚡ 


![unlock cock toy say what darigloo giphy](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/x053xw0e7luomj2ub77u.gif)<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" target="_blank" rel="noopener">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 `<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](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/c12fy2y2vpse1st0fu9g.png)

here is the output:- 

![CSS counter code output](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/3ddvwvqghd0noin2bxwd.png)

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

![It's important giphy](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/a1mjxv6ist0zi9bsurl1.gif)
<iframe src="https://giphy.com/embed/fvmbkNjNwBlHCG3Yin" width="480" height="268" frameBorder="0" class="giphy-embed" allowFullScreen></iframe><p><a href="https://giphy.com/gifs/snl-saturday-night-live-season-47-fvmbkNjNwBlHCG3Yin" target="_blank" rel="noopener">via GIPHY</a></p>


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/