htmlcsshtml-headingcss-counter

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


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


Solution

  • 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