CSS counter-increment not incrementing

user_6106435 0
Viewed 779

I have the following HTML markup

<h1>Article title</h1>
<h2>First section</h2>
<h3>First section, first subsection</h3>
<h2>Second section</h2>
<h2>Third section</h2>
<h3>Third section, first subsection</h3>
<h2>Fourth section</h2>
<h2>Fifth section</h2>
<h3>Fifth section, first subsection</h3>
<h3>Fifth section, second subsection</h3>
<h3>Fifth section, third subsection</h3>
...

And the following SCSS

body.page-id-4065 {
    counter-reset: h2;

    h2 { counter-reset: h3; }
    h3 { counter-reset: h4; }
    h4 { counter-reset: h5; }
    h5 { counter-reset: h6; }

    h2:before {color: $grey-dark; counter-increment: h2; content: counter(h2) ". "}
    h3:before {color: $grey-dark; counter-increment: h3; content: counter(h2) "." counter(h3) ". "}
    h4:before {color: $grey-dark; counter-increment: h4; content: counter(h2) "." counter(h3) "." counter(h4) ". "}
    h5:before {color: $grey-dark; counter-increment: h5; content: counter(h2) "." counter(h3) "." counter(h4) "." counter(h5) ". "}
    h6:before {color: $grey-dark; counter-increment: h6; content: counter(h2) "." counter(h3) "." counter(h4) "." counter(h5) "." counter(h6) ". "}

    h2.nocount:before, h3.nocount:before, h4.nocount:before, h5.nocount:before, h6.nocount:before { content: ""; counter-increment: none }

    #reply-title:before { content: ''; }
}

It seems the increment is working fine outputting:

  1. First section
    1.1. First section, first subsection
  2. Second section
  3. Third section
    3.1. Third section, first subsection
  4. Fourth section
  5. Fifth section

But when it gets there those several H3s are displayed without a counter increment as:

5.1. First subsection
5.1. Second subsection
5.1. Third subsection

I can't seem to grasp why it isn't incrementing those sub but works ok on the top level ones. Any idea why this may be happening?

If you want to see the live page (scroll down to heading #5): https://www.melopienso.com/blog/perros/comida/pienso/

Thanks!

P.S: I've researched other very similar posts on StackOverflow without success for this particular case.

sass css html
1 Answers

The reason it doesn't work is because the h2 is in a sub-level (it has a parent that h3 doesn't).

This works:

<div> <!-- h2's first parent - also h3's first parent -->
  <h2>Fifth section</h2>
  <h3>Fifth section, first subsection</h3>
  <h3>Fifth section, first subsection</h3>
</div>

This works:

<div> <!-- h2's first parent - h3's parent (not first) -->
  <h2>Fifth section</h2>

  <div>
    <h3>Fifth section, first subsection</h3>
  </div>

  <div>
    <h3>Fifth section, first subsection</h3>
  </div>
</div>

This doesn't:

<div>
  <div> <!-- h2's first parent - wait, there's no h3s in sub-levels! -->
    <h2>Fifth section</h2>
  </div>

  <h3>Fifth section, first subsection</h3>
  <h3>Fifth section, first subsection</h3>
</div>
user_66512870
Related