How can I make a numbered section with the CSS counter skipping a header?

Question

I am working on a page where I want the headings to have a section number. But skipping the first h3 header and giving that the value "(0.0.0)"

Example:

 Heading 2 (1.0.0) Heading 3 (0.0.0) <- This one needs 0.0.0 (Skip the first h3 on page) Heading 3 (1.1.0) Heading 4 (1.1.1) Heading 4 (1.1.2) Heading 3 (1.2.0) Heading 4 (1.2.1) Heading 4 (1.2.2) Heading 2 (2.0.0) Heading 3 (2.1.0) Heading 3 (2.2.0) Heading 4 (2.2.1) Heading 4 (2.2.2) Heading 3 (2.3.0) Heading 4 (2.3.1)

I have already tried some things:

 h1 { counter-reset: section; } h2 { counter-reset: subsection; padding-left: 50px; } h2::after { counter-increment: section; content: " (" counter(section) "." counter(subsection) "." counter(subsubsection) ") "; } h3::before { counter-increment: subsection; } h3 { counter-reset: subsubsection; padding-left: 150px; } h3::after { counter-increment: subsection; content: " (" counter(section) "." counter(subsection) "." counter(subsubsection) ") "; } h4 { padding-left: 250px; } h4::after { counter-increment: subsubsection; content: " (" counter(section) "." counter(subsection) "." counter(subsubsection) ") "; }

 <h1>Test</h1> <h2>Heading h2</h2> <h3>Heading 3 (0.0.0)</h3> <!--^ skip this one ^--> <h3>Heading 3</h3> <h4>Heading 4</h4> <h4>Heading 4</h4> <h3>Heading 3</h3> <h4>Heading 4</h4> <h4>Heading 4</h4> <h2>Heading h2</h2> <h3>Heading 3</h3> <h3>Heading 3</h3> <h4>Heading 4</h4> <h4>Heading 4</h4> <h3>Heading 3</h3> <h4>Heading 4</h4>

I was wondering how I could do this or if there is anything I could look at.

Side note: I also noticed that I am repeating code if there is a way to prevent that that would be great.

CodePen Demo

Answer 1

 h1 { counter-reset: section; } h2 { padding-left: 50px; counter-reset: subsection subsubsection; } h2::after { counter-increment: section; content: " (" counter(section) "." counter(subsection) "." counter(subsubsection) ") "; } h3:not(.RuleZero)::before { counter-increment: subsection; } h3 { padding-left: 150px; } h3:not(.RuleZero) { counter-reset: subsubsection; counter-increment: subsection; } h3:not(.RuleZero)::after { content: " (" counter(section) "." counter(subsection) "." counter(subsubsection) ") "; } h4 { padding-left: 250px; } h4::after { counter-increment: subsubsection; content: " (" counter(section) "." counter(subsection) "." counter(subsubsection) ") "; }

 <h1>Test</h1> <h2>Heading 2</h2> <h3 class="RuleZero">Heading 3 (0.0.0)</h3> <h3>Heading 3</h3> <h4>Heading 4</h4> <h4>Heading 4</h4> <h3>Heading 3</h3> <h4>Heading 4</h4> <h4>Heading 4</h4> <h2>Heading 2</h2> <h3>Heading 3</h3> <h3>Heading 3</h3> <h4>Heading 4</h4> <h4>Heading 4</h4> <h3>Heading 3</h3> <h4>Heading 4</h4>

CodePen Demo