1. Technology

CSS 2 Counters - Automatic CSS Counters and Numbering

Generated Content Creates Auto-Incrementing Counters in HTML and CSS 2


When I first learned about CSS counters, I was really excited. It's a great use of CSS to keep track of items within the document tree. The problem is some browsers don't support it. Until most browsers support CSS counters, we will have to either avoid using them or create style sheets for specific browsers.

Reset Your CSS Counter

The first thing to do is reset your CSS counter. While this isn't absolutely required if your list starts at zero, it's a good idea so that you're always aware of where your counter is starting. For my first example, I'm adding counters to the h3 and h4 headlines. These have a parent element of body, so I will reset the counter on the body element.

The other tricky part of counters is that you give them names. My first counter is called "section" - it's a counter on elements in the BODY element, and that's what I'm going to reset:

body { counter-reset: section; }

Increment the Counter

Once you've reset your counter, you need to tell the browser to start counting it. You use the counter-increment property and tell the browser the name of the counter (defined in the counter-reset property as "section") to increment.

h3:before { counter-increment: section; }

While you can place it on the h3 element itself, that will remove all the text for the element. So instead, you need to use one of the pseudo-selectors to place the counter either before or after the h3 element.

Generate the Content

All these counters are well and good, but if you can't see them on the final page, there isn't any point. So to get them to display, we use the content property. Combine the content property with the counter name and the browser will count for you.

h3:before { content: "Part " counter(section) ": "; }

So, my CSS adds the phrase "Part " then the counter named "section" and then a colon space ": ".

See the counters - remember, this only works in some Web browsers.

Include Several Counters

If you want more than one counter you can name a second counter something different. In my sample page, I increment the h4 elements separately from the h3 elements. So I created a second body counter called sub-section:

body { counter-reset: sub-section; }

Then I just increment that element on the h4:before selector the same way as I did with the h3 element.

h4:before { counter-increment: sub-section;
 content: counter(section) "." counter(sub-section) " "; }

Nested CSS Counters

Another way to have multiple counters is to use nested counters with nested elements. So first reset the counter on the ol element:

ol { {counter-reset:numsection; list-style-type: none; }

Since the counter will be generated by the CSS, turn off the list-style so that you don't get double numbering.

Then add your counter-increment on the li:before selector:

li:before { counter-increment: numsection; }

But the fun part is how you nest the counters. Unlike with the previous example, you don't need multiple counters, instead you tell the browser there are multiple counters with the "counters" value:

li:before { content: counters(numsection, ":") " "; }

Then, no matter how many ol lists you have nested within your document, they will all display with the correct numbering.

See the example of nested lists. Be sure to use a browser that can display CSS counters.

I can't wait until CSS counters work in most browsers. That will be incredibly useful.

©2014 About.com. All rights reserved.