CSS: Numbered headings how-to
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. The following articles provide easy tutorials on CSS numbered headings:
- Numbered headings in CSS
- Automatically numbering headings in CSS
- CSS Counters: counter-increment and friends
Everything is perfectly explained in the articles above. I chose to implement the tutorial in the second article.
|
My Article 1. Introduction 1.1. Rationale 2. Background |
Here, the tutorial went down to level 2 headings. In the case of needing more than down to level 2, 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 Latex1 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"> </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.