Dr. Axel Rauschmayer is a freelance software engineer, blogger and educator, located in Munich, Germany. Axel is a DZone MVB and is not an employee of DZone and has posted 246 posts at DZone. You can read more from them at their website. View Full User Profile

Automatically numbering headings via CSS

01.13.2012
| 6243 views |
  • submit to reddit

This post shows you how to number HTML headings with CSS. That is, given the following HTML.

    <h1>My Article</h1>
    <h2>Introduction</h2>
    <h3>Rationale</h3>
    <h2>Background</h2>
With the proper CSS, the above will be displayed as
My Article
1. Introduction
1.1. Rationale
2. Background

Number the headings

To number the headings, we need the CSS construct counter. A counter is an integer variable for which there are there operations: reset, increment, read (in CSS content). To achieve the result shown above, the following CSS suffices:
    body {
        counter-reset: h2counter;
    }
    h1 {
        counter-reset: h2counter;
    }
    h2:before {
        content: counter(h2counter) ".\0000a0\0000a0";
        counter-increment: h2counter;
        counter-reset: h3counter;
    }
    h3:before {
        content: counter(h2counter) "." counter(h3counter) ".\0000a0\0000a0";
        counter-increment: h3counter;
    }
Comments:
  • The above CSS resets the counter for the first numbering level called h2counter when it enters the body. Just to be safe, we reset it again at h1.
  • The pseudo-class :before allows us to insert content before the inside of a tag.
  • The character \0000a0 is a non-breaking space in CSS. Hence there are always two non-breaking spaces after the last dot of each heading number.

Switch off numbering for some headings

Sometimes we want a single heading to not be numbered. The following CSS does not number headings that have a class nocount.
  
  body {
        counter-reset: h2counter;
    }
    h1 {
        counter-reset: h2counter;
    }
    
    h2:before {
        content: counter(h2counter) ".\0000a0\0000a0";
        counter-increment: h2counter;
        counter-reset: h3counter;
    }
    h2.nocount:before {
        content: none;
        counter-increment: none;
    }
    
    h3:before {
        content: counter(h2counter) "." counter(h3counter) ".\0000a0\0000a0";
        counter-increment: h3counter;
    }
    h3.nocount:before {
        content: none;
        counter-increment: none;
    }
We follow each counter clause with a non-counter version that becomes active in the presence of the class nocount and prevents the counter from being displayed and incremented.

Non-numbered headings by default

If you want to be able to choose between all headings being numbered and no headings being numbered, you have two options:
  1. Numbering is on by default: You can switch it off, e.g. by putting a class nocount in a surrounding tag. That can be achieved by replacing the single selector
        h2.nocount:before
    with two selectors:
        .nocount h2:before, h2.nocount:before
  2. Numbering is off by default: Then you prefix the :before rules with a condition, e.g. whether the class countheads is present in a surrounding tag:
        .countheads h2:before
    
The CSS shown below is a variation of idea #2: Switch on numbering if a sibling tag of h2 has a class countheads. The general sibling combinator ~ (tilde) lets us do that:
    body {
        counter-reset: h2counter;
    }
    h1 {
        counter-reset: h2counter;
    }
    
    .countheads ~ h2:before {
        content: counter(h2counter) ".\0000a0\0000a0";
        counter-increment: h2counter;
    }
    h2.nocount:before {
        content: none;
        counter-increment: none;
    }
    h2 {
        counter-reset: h3counter;
    }
    
    .countheads ~ h3:before {
        content: counter(h2counter) "." counter(h3counter) ".\0000a0\0000a0";
        counter-increment: h3counter;
    }
    h3.nocount:before {
        content: none;
        counter-increment: none;
    }

Conclusion

We have seen how to automatically count headings in HTML via CSS and how to conditionally switch it off in some places. You can download a demo file (view online) on GitHub.

 

From http://www.2ality.com/2012/01/numbering-headingshtml.html

Published at DZone with permission of Axel Rauschmayer, author and DZone MVB.

(Note: Opinions expressed in this article and its replies are the opinions of their respective authors and not those of DZone, Inc.)

Tags:

Comments

Lisa Coffey replied on Fri, 2014/07/11 - 5:56am

 The character \0000a0 is a non-breaking space in CSS. Hence there are always two non-breaking spaces after the last dot of each heading number.Sometimes we want a single heading to not be numbered. Numbering is on by default: You can switch it off, e.g. by putting a class no count in a surrounding tag. That can be achieved by replacing the single selector

Thanks

Lisacoffey

Reply

Comment viewing options

Select your preferred way to display the comments and click "Save settings" to activate your changes.