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

Automatically counting and numbering HTML elements with CSS counters

wangonya profile image Kinyanjui Wangonya Originally published at wangonya.com ・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

pic
Editor guide
Collapse
cantnopwontnop profile image
NOP

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

Collapse
pramodghuge profile image
Pramod Ghuge

Everyday you learn something new!

Collapse
zed_developer profile image
#ZedZed

had no idea this is awesome