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?
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
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With