Having some difficulty with the css 'counter-increment' and 'counter-reset' properties. I've successfully implemented them with lists, but struggling when it comes to header tags.
Consider the following structure:
<div id="root">
<div class="section">
<h1 class="header">Header</h1>
<div class="section">
<h2 class="header">Header</h2>
<!-- can be nested multiple times -->
</div>
</div>
<div class="section">
<h1 class="header">Header</h1>
<!-- content -->
</div>
</div>
I want the header tags to have numbers (counting nested ones too) but having trouble as the headers themselves don't contain the counters directly. Here's what I've tried so far:
#root
{
/* Reset counter for root */
counter-reset: section_header;
}
#root .section
{
/* Increment for each section div as they wrap children */
counter-increment: section_header;
}
.section .header::before
{
/* Display the count, but not getting correct value due to scope issue? */
content: counters(section_header, ".") " ";
}
Any guidance towards a solution would be appreciated!
PS: Testing mainly on Chrome, but encountering issues on other browsers too.
Edit
Desired format is '1.1', '1.2', '1.2.1' etc.. Nested sections should add another layer to the count. Struggling to achieve dynamic multi-layer numbering.