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.
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>