demo for counter-increment acts like it is for counter-reset

[joyously]

MDN URL

https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties/counter-increment

What specific section or headline is this issue about?

https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties/counter-increment#try_it

What information was incorrect, unhelpful, or incomplete?

The first demo for counter-increment acts as if there is not a named counter, so you don't see the increment happening. It makes it look like the second parameter is the value to set it to, and so it doesn't match the explanation.

What did you expect to see?

I expected that choosing -5 after 1 would show -4. If there is only one thing being counted, it's not much of a demo.

Do you have any supporting links, references, or citations?

No response

Do you have anything more you want to share?

What I came to the page to learn is when the counting happens. I saw this example of counting checked and unchecked checkboxes and it didn't explain why the unchecked isn't always the total. This page didn't explain that either.

input[type="checkbox"] {  counter-increment: unchecked-sum;}
input[type="checkbox"]:checked {  counter-increment: checked-sum;}
.totalUnChecked::after {  content: counter(unchecked-sum);}
.totalChecked::after { content: counter(checked-sum); }

I have a case where I build a pattern with 4 colors in custom properties, and I want to be able to count how many of each color is used. (I'm counting in JS currently.)

MDN metadata

Page report details

• Folder: en-us/web/css/reference/properties/counter-increment
• MDN URL: https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties/counter-increment
• GitHub URL: https://github.com/mdn/content/blob/main/files/en-us/web/css/reference/properties/counter-increment/index.md
• Last commit: 33094d7
• Document last modified: 2025-12-16T15:14:26.000Z