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
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:
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.
h2.nocount:beforewith two selectors:
.nocount h2:before, h2.nocount:before
.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; }