09 February 2013

Numbered headings in CSS


Sometimes in this blog I post entries as if they were school assignments or articles. In those cases, the content must have a clear hierarchy, and thus numbered headings is the easiest way of accomplishing that.

ulven-icon-css3
My Article
1. Introduction
1.1. Rationale
2. Background

Here, the following code provides how to get up to level 6, that is down to the <h6> headings. The key is to concatenate the items in the right order like so:

// for the h2 header
content: counter(h2counter) ".\0000a0\0000a0";

// for the h3 header
content: counter(h2counter) "." counter(h3counter) ".\0000a0\0000a0";

// for the h4 header
content: counter(h2counter) "." counter(h3counter) "." counter(h4counter) ".\0000a0\0000a0";

// for the h5 header
content: counter(h2counter) "." counter(h3counter) "." counter(h4counter) "." counter(h5counter) ".\0000a0\0000a0";

// for the h6 header
content: counter(h2counter) "." counter(h3counter) "." counter(h4counter) "." counter(h5counter) "." counter(h6counter) ".\0000a0\0000a0";

This way, your ordered headings will have a similar structure to that of Latex[1. Latex] and will look something like this:


1 Section
1.1 Subsection
1.1.1 Sub-subsection
1.1.2 Paragraph
1.1.2.1 Sub-paragraph
1.2 Subsection
1.2.1 Sub-subsection
2 Section
3 Section
4 Section
5 Section
6 Section

…And so on.

In this implementation, I chose not to number every heading but only those that I need. I only want certain headings to be numbered, in certain cases, not in every post, everywhere, all the time. To accomplish that, I assign a class to a div layer like so:

<div class="class_name_of_your_choice">&nbsp;</div>

This way, only the headings downwards on will be numbered, but not anything above it.

Below is the complete CSS code that I implemented with the help of the tutorials mentioned above.

First part

body {
counter-reset: h2counter;
}

h1 {
counter-reset: h2counter;
}

h2 {
counter-reset: h3counter;
}

h3 {
counter-reset: h4counter;
}
    
h4 {
counter-reset: h5counter;
}
 
h5 {
counter-reset: h6counter;
}

Second part

h2:before {
content: none;
counter-increment: none;
}

h3:before {
content: none;
counter-increment: none;
}

h4:before {
content: none;
counter-increment: none;
}

h5:before {
content: none;
counter-increment: none;
}

h6:before {
content: none;
counter-increment: none;
}

Last part

   
.class_name_of_your_choice ~ h2:before {
content: counter(h2counter) ".\0000a0\0000a0";
counter-increment: h2counter;
}

.class_name_of_your_choice ~ h3:before {
content: counter(h2counter) "." counter(h3counter) ".\0000a0\0000a0";
counter-increment: h3counter;
}

.class_name_of_your_choice ~ h4:before {
content: counter(h2counter) "." counter(h3counter) "." counter(h4counter) ".\0000a0\0000a0";
counter-increment: h4counter;
}

.class_name_of_your_choice ~ h5:before {
content: counter(h2counter) "." counter(h3counter) "." counter(h4counter) "." counter(h5counter) ".\0000a0\0000a0";
counter-increment: h5counter;
}

.class_name_of_your_choice ~ h6:before {
content: counter(h2counter) "." counter(h3counter) "." counter(h4counter) "." counter(h5counter) "." counter(h6counter) ".\0000a0\0000a0";
counter-increment: h6counter;
}

In the case that you are using for instance, WordPress, most themes use the <h2> tag for the entry titles (I use <h1>, hence my CSS code reflects that). In order to achieve the same result in most WordPress themes, the <body> CSS code should be altered like this:

body {
counter-reset: h3counter; // instead of h2counter
}

And you should omit this code:

h1 {
counter-reset: h2counter;
}

Mind that h2counter, h3counter, h4counter, etc., can be named anything you want. Hope this helps. Please, take a look at the links provided for more and further information.



Last updated on
CSS, How-To


Related Articles



Leave a response

Fields marked with * are required. Email addresses are never shared.



// //