DEV Community

Cover image for Automatically counting and numbering HTML elements with CSS counters

Automatically counting and numbering HTML elements with CSS counters

Kinyanjui Wangonya
Originally published at ・1 min read

Say you had an unknown number of <div> elements and (for some reason) you wanted to count them and number each other them automatically - how would you do it? If you're like me, your first thought would be to use some kind of Javascript to play around with the DOM. What if I told you (insert Morpheus voice here) you can do it with CSS?

How to use CSS counters

Getting counters working requires three steps:

  • Initialize the counter with counter-reset
  • Increment the counter with counter-increment
  • Show the current counter value with counter()

It's pretty simple, really. The Pen below demonstrates how to count and number three <div> elements.

Where would this be useful?

I discovered CSS counters while looking for a way to number images on my blog posts. That's one place it would really come in handy. Here's a quick example:

Discussion (3)

cantnopwontnop profile image

CSS counters are awesome. Using CSS for print styles, I used CSS counters to stylize page numbers to prepare for converting to PDF.

pramodghuge profile image
Pramod Ghuge

Everyday you learn something new!

zed_developer profile image

had no idea this is awesome