CSS list with multiple counters doesn't count properly

Question

I have a <ul>-list with two different counters:

ul.numbered {
    counter-reset: alphaCounter, numberCounter;
}

ul.numbered li.numbered,
ul.numbered li.lettered {
    padding-left: 1.8em;
}

ul.numbered li.numbered:before {
    position: absolute;
    top: 0;
    left: 0;
    counter-increment: numberCounter;
    content: counter(numberCounter, decimal) ". "; 
}

ul.numbered li.lettered:before {
    position: absolute;
    top: 0;
    left: 0;
    counter-increment: alphaCounter;
    content: counter(alphaCounter, upper-alpha) ". "; 
}

This list counts the li.lettered-items properly with A., B., etc.. But the li.numbered-items always start with "1.". If I switch the order of the counter-reset to counter-reset: numberCounter, alphaCounter;, the numbers count properly and the letters always start with "A.".

From what I read, I set up the list properly, but well, appearantly not. Any help on this?

Cathepsin

Answer 1

Okay, the problem was the comma between the two counters on counter-reset. The proper solution for resetting multiple counters in this case would be:

counter-reset: numberCounter alphaCounter;

W3C, 12.4 Automatic counters and numbering

Cathepsin

I ran into the same issue when attempting to reset multiple counters using the (also incorrect) syntax of body {counter-reset: counter1; counter-reset: counter2;} or body {counter-reset: counter1;} body {counter-reset: counter2;}. Apparently, listing the counters without commas is indeed the only acceptable syntax for resetting multiple counters (I tried on Chrome and with the Flying Saucer HTML to PDF processor) – Bitternut