css counter-reset: not working in firefox?

Question

css counter-reset: not working in firefox?

1.3k Views Asked by An Observer At 05 April 2025 at 00:38

Has the Firefox desktop v84 update broken the CSS counter-reset: functionality? Chrome and Edge render ok but not Firefox Can anybody confirm?

Below is a sample of the code that I'm using:

body
{
counter-reset: section subsection;
}
p.section
{
  counter-reset: subsection;
}
p.section:before
{
  counter-increment: section;
  content: "" counter(section) ".0" ": ";
  counter-reset: subsection;
}
p.subsection:before
{
  counter-increment: subsection;
  content: "" counter(section) "." counter(subsection) ": ";
}

<p class="section">Paragraph should be 1.0</p>
<p class="section">Paragraph should be 2.0</p>
<p class="subsection">Paragraph should be 2.1</p>
<p class="subsection">Paragraph should be 2.2</p>
<p class="section">Paragraph should be 3.0</p>
<p class="section">Paragraph should be 4.0</p>
<p class="subsection">Paragraph should be 4.1</p>

Original Q&A

There are 4 best solutions below

**Yudiz Solutions** · Answer 1

Can you please check the below code? Hope it will work for you. No need to reset the subsection in the body, because we need to reset the counter after every section. so we have kept the counter reset subsection in the section as it is.

Please refer to this link https://jsfiddle.net/yudizsolutions/baqnzf39/6/

<html>

<head>
  <style type="text/css">
    body {
      counter-reset: section;
    }

    p.section {
      counter-reset: subsection;
    }

    p.section:before {
      counter-increment: section;
      content: ""counter(section) ".0"": ";
      counter-reset: subsection;
    }

    p.subsection:before {
      counter-increment: subsection;
      content: ""counter(section) "."counter(subsection) ": ";
    }
  </style>
</head>

<body>
  <p class="section">Paragraph should be 1.0</p>
  <p class="section">Paragraph should be 2.0</p>
  <p class="subsection">Paragraph should be 2.1</p>
  <p class="subsection">Paragraph should be 2.2</p>
  <p class="section">Paragraph should be 3.0</p>
  <p class="section">Paragraph should be 4.0</p>
  <p class="subsection">Paragraph should be 4.1</p>
</body>

</html>

**randomsearch** · Answer 2

randomsearch On 07 November 2022 at 15:32

Always use

counter-set foo 0

rather than

counter-reset foo

It seems Firefox's counter-reset has different semantics from Chrome. This works around their differences.

**Tony Garnock-Jones** · Answer 3

Ouroborus's comment on your question is the key: use counter-set on your body style to create the counters, and continue to use counter-reset on other elements to reset them. I had the same problem with Firefox, and switching to counter-set on the body style fixed it.

This seems to be a recent Firefox change: previously, the counters seemed to be implicitly created, and now it seems that creation has to be done explicitly.

**Pols12** · Answer 4

Actually, in current W3C CSS specification draft, counter-reset is expected to instantiate a new counter, whereas counter-set edits an existing counter (and creates a new one in case there is none with that name).

In your code:

The properties counter-reset: subsection; create new counters called “subsection” in body, p.section and p.section::before scopes respectively.
p.subsection inherits both counters from its parent (body).
- Chromium wrongly inherits the subsection counter created by its preceding sibling (but not the one created by ::before pseudo-element).
Then, p.subsection counter values have to be updated from preceding element ones.
- In Firefox ≥ 82, the original subsection counter has not been updated, since you create a new counter each time.
- In Chromium, you have inherited the counter from preceding sibling, so its value can be updated and is actually used. But the subsection counter created at body level is useless.

To fix you code, complying with current specification and having a browser consistent behavior, you have two possibilities:

Use `counter-set: subsection` rule

In order to edit the counter instead of creating a new one. Note counter-set is not supported by Safari yet.

body
{
counter-reset: section subsection; /* subsection counter is “global” */
}
/*
* Useless rule, you already perform a reset in .section::before *
p.section
{
  counter-reset: subsection;
} */
p.section::before
{
  counter-increment: section;
  content: counter(section) ".0: ";
  counter-set: subsection; /* Edits the body counter to set it to 0 */
}
p.subsection::before
{
  counter-increment: subsection;
  content: counter(section) "." counter(subsection) ": ";
}

<html>
<body>
<h3>With counter-set</h3>
<p class="section">Paragraph should be 1.0</p>
<p class="section">Paragraph should be 2.0</p>
<p class="subsection">Paragraph should be 2.1</p>
<p class="subsection">Paragraph should be 2.2</p>
<p class="section">Paragraph should be 3.0</p>
<p class="section">Paragraph should be 4.0</p>
<p class="subsection">Paragraph should be 4.1</p>
</body>
</html>

Make `.subsection` children of `.section`

In order to properly inherit counters.

body {
  counter-reset: section; /* subsection counter is not “global” */
}
div.section::before
{
  counter-increment: section;
  content: counter(section) ".0: ";
  counter-reset: subsection; /* Creates a new counter for each section. */
}
div.subsection::before
{
  counter-increment: subsection;
  content: counter(section) "." counter(subsection) ": ";
}

<html>
<body>
<h3>Tree ordering</h3>
<div class="section">Should be 1.0</div>
<div class="section">Should be 2.0
  <div class="subsection">Should be 2.1</div>
  <div class="subsection">Should be 2.2</div>
</div>
<div class="section">Should be 3.0</div>
<div class="section">Should be 4.0
  <div class="subsection">Should be 4.1</div>
</div>
</body>
</html>

Note there are still discussions, so you should not expect counter-reset CSS feature to be stable.

css counter-reset: not working in firefox?

There are 4 best solutions below

Use `counter-set: subsection` rule

Make `.subsection` children of `.section`

Related Questions in HTML

Related Questions in CSS

Related Questions in FIREFOX

Related Questions in CSS-COUNTER

Trending Questions

Popular # Hahtags

Popular Questions

css counter-reset: not working in firefox?

There are 4 best solutions below

Use counter-set: subsection rule

Make .subsection children of .section

Related Questions in HTML

Related Questions in CSS

Related Questions in FIREFOX

Related Questions in CSS-COUNTER

Trending Questions

Popular # Hahtags

Popular Questions

Use `counter-set: subsection` rule

Make `.subsection` children of `.section`