Numbered headings in CSS

“New” thing for today, I’ve been looking at doing outlined numbering for headings, like you do in various formal documents. For example:

1 Heading 1

1.1 Heading 2

1.1.1 Heading 3

1.1.1.1 Heading 4

Now doing this automatically is difficult, but in CSS, well CSS3, it can be done. Unfortunately not in IE7 :/

Anyway, here is the basis of the code, the full CSS that does the above is under the “Cut” below.

The idea is very simple, for each heading, we maintain a “counter” within CSS to store the number. Before first use of the counter, you must “reset” it, so each enclosing level should “reset” the counter. Also each level needs it’s own counter.

So to kick the CSS off, let us assume we have a numbered page with a body:

body.numbered {
    counter-reset: mynum-h1;
}

This defines BODY element with a “numbered” class, that does a reset of the H1 counter. Next:

h1.numbered {
    counter-reset: mynum-h2;
}

This defines a H1 element that does a reset of the H2 counter, and now for something different:

h1.numbered:before {
    content: counter(mynum-h1) ” “;
    counter-increment: mynum-h1;
}

Now, this defines a “before” style that is used before rendering the rest of the H1 “numbered” element. It has a content: statement that returns the current value of the counter mynum-h1 followed by a space (” “), which is the numbering that was reset by the BODY. The counters start from 1, just in case you were wondering. For the next level H2, we have:

h2.numbered {
    counter-reset: mynum-h3;
}

h2.numbered:before {
    content: counter(mynum-h1) “.” counter(mynum-h2) ” “;
    counter-increment: mynum-h2;
}

This pattern repeats for each level of the H elements. The above will do the numbering of the H2 elements, starting from 1 which is reset after every H1. The output is the outer counter mynum-h1 then a period “.” then the counter for H2: mynum-h2. The H2 numbered element will also reset an H3 counter.

 

Creative Commons License
This work is licensed under a Creative Commons Licence.

/* - numbering.css */
body.numbered { 
    counter-reset: mynum-h1; 
}

h1.numbered {
    counter-reset: mynum-h2;
}

h1.numbered:before {
    content: counter(mynum-h1) " ";
    counter-increment: mynum-h1;
}

h2.numbered {
    counter-reset: mynum-h3;
}

h2.numbered:before {
    content: counter(mynum-h1) "." counter(mynum-h2) " ";
    counter-increment: mynum-h2;
}

h3.numbered {
    counter-reset: mynum-h4;
}

h3.numbered:before {
    content: counter(mynum-h1) "." counter(mynum-h2) "." counter(mynum-h3) " ";
    counter-increment: mynum-h3;
}

/* No support for h5 :-) */
h4.numbered {
    
}

h4.numbered:before {
    content: counter(mynum-h1) "." counter(mynum-h2) "." counter(mynum-h3) "." counter(mynum-h4) " ";
    counter-increment: mynum-h4;
}

WordPress aint’s so good at this Code thing is it ? 😦

Advertisements

One response to “Numbered headings in CSS

  1. Pingback: CSS: Numbered headings how-to

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s