Is it possible to automatically generate section numbering in CSS only when there are multiple sections present? I discovered that using CSS, one can create automatic numbering for sections.
body { counter-reset: section }
h2 { counter-reset: sub-section }
h3 { counter-reset: composite }
h4 { counter-reset: detail }
h2:before{
counter-increment: section;
content: counter(section) " ";
}
h3:before{
counter-increment: sub-section;
content: counter(section) "." counter(sub-section) " ";
}
h4:before{
counter-increment: composite;
content: counter(section) "." counter(sub-section) "." counter(composite) " ";
}
h5:before{
counter-increment: detail;
content: counter(section) "." counter(sub-section) "." counter(composite) "." counter(detail) " ";
}
This code will produce numbering like:
1.1 XXX
for HTML elements such as <h3>XXX</h3>
, and:
1.1 XXX
...
1.2 XXX2
for HTML elements like:
<h3>XXX</h3>
...
<h3>XXX2</h3>
However, the numbering should be generated only if there are multiple <h3>
tags in the HTML. Can this be achieved?