Automatically numbering headings via CSS
Join the DZone community and get the full member experience.
Join For FreeThis 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:- 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
- 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
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
CSS
Opinions expressed by DZone contributors are their own.
Trending
-
What Is Test Pyramid: Getting Started With Test Automation Pyramid
-
Apache Kafka vs. Message Queue: Trade-Offs, Integration, Migration
-
A Complete Guide to AWS File Handling and How It Is Revolutionizing Cloud Storage
-
Build a Simple Chat Server With gRPC in .Net Core
Comments