Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

CSS list with multiple counters doesn't count properly

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?

like image 653
R4ttlesnake Avatar asked Apr 02 '15 10:04

R4ttlesnake


1 Answers

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

like image 95
R4ttlesnake Avatar answered Oct 12 '22 02:10

R4ttlesnake