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