Counter does not increment in CSS

Question

In this example:

h3 {
  font-size: .9em;
  counter-reset: section;
}
h4 {
  font-size: .7em;
  counter-reset: subsection;
}
h3:before {
  counter-increment: section;
  content: counter(section)" ";
}
h4:before {
  counter-increment: subsection 2;
  content: counter(section)"." counter(subsection)" ";
}

<h3>Favorite Movies</h3>
<h4>District 9</h4>
<h4>The Matrix</h4>
<h4>The Cabin in the Woods</h4>

<h3>Others</h3>
<h4>Minority Report</h4>
<h4>Lord of the Rings</h4>
<h4>Fargo</h4>

I see that section and subsection does not increment.

What is the problem in this code?

Kimsey

Answer 1

The counters are not incrementing properly because you're resetting them in their own parent.

For example, the counter section is being reset (that is, the value is set to 0) every time the browser encounters a h3 tag and so when the counter-increment is being called within h3:before (children of h3), it just increments from 0 to 1 every time.

You should reset the counters at the grand parent level (or at body if there is no grand parent).

body {
  counter-reset: section;
}
h3 {
  font-size: .9em;
  counter-reset: subsection;
}
h4 {
  font-size: .7em;
}
h3:before {
  counter-increment: section;
  content: counter(section)" ";
}
h4:before {
  counter-increment: subsection 2;
  content: counter(section)"." counter(subsection)" ";
}

<!-- at body reset section to 0 -->

<h3>
  <!-- the h3 will inherit counter section from body (its parent) and increment to 1 in :before -->
  <!-- every time a h3 is encountered, the subsection is reset to 0 -->
  Favorite Movies
</h3>
<h4>
  <!-- this inherits subsection counter from previous sibling and increments value to 2 in :before -->
  District 9
</h4>
<h4>
  <!-- this inherits subsection counter and its value from previous sibling and increments value to 4 in :before -->
  The Matrix
</h4>
<h4>
  <!-- this inherits subsection counter and its value from previous sibling and increments value to 6 in :before -->
  The Cabin in the Woods
</h4>

<h3>
  <!-- the h3 will inherit counter section from body (its parent), its value from the previous sibling and increment to 2 in :before -->
  <!-- here the subsection counter is again reset to 0 because the subsection numbering has to restart -->
  Others
</h3>
<h4>
  <!-- this inherits subsection counter from previous sibling and increments value to 2 in :before -->
  Minority Report
</h4>
<h4>
  <!-- this inherits subsection counter and its value from previous sibling and increments value to 4 in :before -->  
  Lord of the Rings
</h4>
<h4>
  <!-- this inherits subsection counter and its value from previous sibling and increments value to 6 in :before -->  
  Fargo
</h4>

Crutchfield

from previous sibling? Is h3 sibling of h4? – Kimsey

@overexchange: Each element would inherit the counters and values from previous siblings, so the value of the section counter would be carried over to all h4 elements also. I left it out for brevity. You can find a very detailed explanation of counter inheritance in my answer here. And yes, the second h3 is a sibling of h4 as per the structure in question. Elements are siblings as long as they share the same parent. Here the parent for both h3 and h4 is body. – Crutchfield

As far as I can tell, counters get relatively less attention than other CSS properties. This is due most likely to relatively less use. But @Harry's answers are very useful and helpful. Good question, good answer. Thanks both. – Jude

@Michael_B How do you number list items? – Kimsey

@overexchange, I use default numbering or start attribute. I've never used counters in production and am not an expert. Hence, I appreciate reading these questions and answers, which are useful lessons. – Jude

Answer 2

For me it only started incrementing the subsection after resetting subsection within body, too, both within one line:

counter-reset: ctrPos ctrSubPos;

Alas, I could still not reset the subsection counter. Tested on current chromium and Firefox 104.0.1.

Conifer