Quick Tip: How to Keep the Count with CSS
Tutorial Details
- Topic: CSS
- Difficulty: Basix
Did you know that, with CSS, you can create a counter? This can be especially useful for instances where the count is purely needed for presentational purposes. I’ll show you how to use counter-increment in this useful quick tip.
Screencast
How Does it Work?
It’s really quite simple. We’re not even talking CSS3 here; the counter-increment property has been around for a while now. It’s just that many of us aren’t familiar with it, or haven’t found a use for it.
We begin by applying the counter-increment property. Let’s imagine that we have a set of boxes, and each box should display a number that corresponds to the order that the box occurs it its sequence.
.box {
counter-increment: boxes;
}
The
counter-incrementproperty can accept either one or two properties. The first is anidthat you will later use to reference this specific counter. You may also pass a second parameter that refers to the increment. For example, instead of 1, 2, 3, 4, you could switch to 5, 10, 15, 20 by applying:counter-increment: boxes 5.
This code will now store a unique number for each element that has a class of box. But of course, we want to get this number on the page. Hopefully, we’ll, at some point in the future, be able to use the content property within standard selectors, but not quite yet. Instead, we’ll use pseudo elements to apply the content.
.box:after {
content: counter(boxes);
}
This will apply a unique number – again, based on the element’s order in the sequence – to the .box element. Should we need to reset this order back to 1 at some point, we could usethe counter-reset: boxes property.
Why Do This, Again?
Now, you still might be thinking: “Why would I ever use this?” There’s lots of situations when it might be handy. For example, consider a comments section of a blog. If you wanted to provide
a number for each comment in the set – possibly slightly transparent – you could use this technique. The number isn’t vital to the markup, and is only used for presentation. In these cases, CSS
counters will do the trick nicely!
Enjoyed this Post?
Subscribe to our RSS Feed, Follow us on Twitter or simply recommend us to friends and colleagues!
By Jeffrey Way
Join our newsletter!
Create a Tutorial, Get Paid!
Have something to teach the world? Want to earn money doing it? Tutorials, screencasts, and articles published here on Nettuts+ are largely contributed by readers just like you! We'll pay you great money for good content. Find Out More
Wow.. First Comment. I have to say this is a first for me? Have Never seen this before. But now that I have. I can say that I can think of a few ways to use this.
Glad to see that CSS3 is becoming more vibrant with the new tips and tricks, cannot wait for more releases. By the way, Jeffery Way, I would like to personally thank you for your CodeIgniter tutorials. I now fluently work with CI constantly and I’m currently building a Social Network based around the environment.
Thanks, Craig.
This is CSS2 though. :)
Even better! :D
Great tutorial but there seems to be a problem with li:nth-child(4n) code. It goes like that; 1-2-3-1-2-3-4-1. As you can see, first it counts to 3 and resets. And then it counts to 4 and resets. This is true for ever “Xn” counter.
So instead of li:nth-child(4n), you better write li:nth-child(3n+1).
Yeah – 3n+1 will do the trick.
Nice tip. Cant believe it’s CSS2 and I never heard of it before.
I had no idea you could do this! Great tip
Nice
I never thought CSS2 has such feature. Wow.
I started work for the day about 2 minutes ago… I’ve learned something already.
Thanks for sharing.
I’ve never heard about counting in CSS. Nice tip!
But, the nth-child is CSS3, so if you work with reset this don’t work well in old browsers.
I’ve found an good example of use this on the w3.org site: CSS properties: Counter-increment
If you work with chapters it will be very nice!
This is new to me aswel! the comment idea is great and i might just steal it :-)
Just a quick question. I haven’t tried this yet, nor should I bother to, but just for it’s sake.
Does this also work on IE?
Nope.
Yes.
From ie8 and up. not nth-child though. That’s from ie9 and up, unless you use “selectivizr” (small jquery plugin, that makes ie6+ understand css3 selecters).
Thanks a lot Jeffrey. That was very helpful for me!
Nice
Very useful for displaying line numbers, so you can easily copy a piece of code without the line numbers :)
another cool tutorial from jeffrey way :D thanks for sharing!
Very cool tutorial.Thanks a lot for sharing this tutorial.
Which browsers support this?
Very informative thanks a lot for the nice tutorial…
Thats a really nice one! Thanks for sharing.
This is my outcome http://tinkerbin.com/YTKXccRC : )
Great trick, think I saw it once before and dismissed it, but great to see it in action. One question though, How does this compare to using an OL element?
Last,
I see what you mean. But there are many situations when you don’t want list items. Like if you’re displaying a bunch of photo boxes, or various other elements, a list would be a headache to style.
Jeffrey, very interesting post! And I’ll second the request for knowing what browsers will support this!
Thanks, Dave
despite questioning the use of it, I actually just used it. Needed to style an ordered list as inline block and lost my numbers. used this to get them back
I had no idea! Here’s my mess around with letters:
http://tinkerbin.com/umoZm7bs
give basic knowlage code in php….
Thanks for this, Jeffrey and others !
Always love your tuts!!!
just a remark on something weird:
when i click on your demos ( also the ones in the comments), i get this:
http://tinypic.com/view.php?pic=2zhjrtl&s=5
and have to re-edit the code manually , inserting tags, to get to the result .
Am i doing something wrong, or did some Tinkerbin parser go wild?
komiska, at html editor, instead “format: Plain”, select “format: HAML”
Recently, due project requirements, I had need of this technique. After that, I tried to explain it on my blog: Custom list order number position
Very useful technique.
Very good article. I will use it in the future for sure. I like the way you explained it, simple and also easy to understand.
very nice! :)
Jeffrey, thank you, i’ve never heard about it – it’s great
But unfortunatly it’s don’t work in ie7 :(
Step
Step
fieldset {
counter-increment: legends;
}
fieldset > legend:after
content: counter(legends)
}
Produces something similar to:
Step 1
Step 2
Demo link didn’t work for me…
Thanks JW,
I think this is useful also in image galleries and I was shocked never knew this was CSS2,
but I dont know why do you guys use instead of ?
what if i need started from particular number and increment it one or more in each step?
this is really handy to know
Thanks
Nice one! Using the counter reset, the first reset goes wrong though (leading to 1-2-3 / 1-2-3-4 / 1-2-3-4 /… with nth-child(4n) f.ex.). Happens in all browsers and with every stepping – check the output in the demo with some additional s…
Thanks anyway, might come in handy!
Found a way to fix it! Use li:nth-child(4n+1) instead of (4n) — or (4n+x) if you use a stepping of x… ;-)
hey guys. i am learning CSS and it is quite dull to learn all alone. what should i do? :S
Wow, never tought that way..
Nice tutorial for a newbie like me.