CSS counter-reset gotcha

Alec Jacobson

May 24, 2020

weblog/

I tried to set up an html document to have counters on the h1, h2, etc. elements. I had written some CSS that looked like this:

h1
{
counter-reset: counterA;
counter-reset: counterB;
}

but it turns out this means the that first line counter-reset: counterA; is replaced by the second line counter-reset: counterB;. So my counterA was not getting reset. Instead the correct CSS code should be a single line:

h1
{
counter-reset: counterA counterB;
}