The Power of CSS’s Automatic Numbering

CSS is great for styling your website, but did you know it can do math? Of course it can! When you define an ordered list who do you think keeps track of the numbers? It’s built into CSS!

<ol>
    <li>Opening Scene</li>
    <li>Boy Meets Girl</li>
    <li>Boy Looses Girl</li>
    <li>Boy Fights Opponents
        <ol>
            <li>The Wrestler</li>
            <li>The Engineer</li>
            <li>Captain Doom</li>
        </ol>
    </li>
    <li>Everybody Lives Happily Ever After</li>
</ol>

1. Opening Scene
2. Boy Meets Girl
3. Boy Looses Girl
4. Boy Fights Opponents
   1. The Wrestler
   2. The Engineer
   3. Captain Doom
5. Everybody Lives Happily Ever After

To better understand this we have to do it by hand. Let’s Imagine that the <ol /> element doesn’t exist. How dow we automatically number things? The first idea that comes to mind is to use javascript to number things.

<script src="jQuery.js"></script>
<script type="text/javascript">
    $(function(){
        var i = 0;
        $('.ordered-list .list-item').each(function(){
            $(this).prepend(++i+' ');
        });
    });
</script>
<div class="ordered-list">
    <div class="list-item">one</div>
    <div class="list-item">two</div>
    <div class="list-item">three</div>
</div>

Well that seems easy enough until you consider nested lists, alpha-numeric numbering, upper and lowercase roman numerals etc. What a pain in the neck! Let’s assume we have the same XML structure, but this time we’ll style the numbering using CSS’s :before and :after pseudo elements.

<style type="text/css">
    .ordered-list { counter-reset: list }
    .list-item:before {
        content: counter(list) " ";
        counter-increment: list;
    }
</style>
<div class="ordered-list">
    <div class="list-item">one</div>
    <div class="list-item">two</div>
    <div class="list-item">three</div>
</div>

Looks like javascript right? Counter-reset declares a new counter based on any string, (except ‘none’, ‘inherit’ or ‘initial’). Any element can trigger the counter-reset or counter-increment and multiple counter-increments can happen for each element. Counters can have all sorts of styles using content: counter([string], [style]);.

List Styles

1. disc
2. circle
3. square
4. decimal
5. decimal-leading-zero
6. lower-roman
7. upper-roman
8. lower-greek
9. lower-latin
10. upper-latin
11. armenian
12. georgian
13. lower-alpha
14. upper-alpha
15. none
16. inherit

Practical Example: Comment Numbering

CSS

.comment { counter-increment: comments }
.post { position: relative; counter-reset: comments }
.post:after {
    color: #c0c0c0;
    content: counter(comments) " comments";
}

HTML

<div class="post">
    <h3>Comments</h3>
    <div class="comment">Nice blog.</div>
    <div class="comment">Great post.</div>
    <div class="comment">I don't understand.</div>
    <div class="comment">How about a Javascript version?</div>
    <div class="comment">I can't get it to work.</div>
</div>
<div class="post">
    <h3>Comments</h3>
    <div class="comment">Cool article dude.</div>
</div>

With a little styling the comment count can go anywhere you like. You might also include class="member" and keep track of how many members commented. Or perhaps number your images with “Figure 1.A”. CSS’s automatic increment really shines in the case of large documents with many sections and sub-sections. It’s great for automatic chapter headings. Really, you can number any element you like. Do be aware that the :before and :after pseudo-elements are not IE friendly (IE8 and older). For full details on CSS’s auto-increment properties click here.