Custom Numbering For A Reversed Ordered List

How can I create custom counter styles for a reversed ordered list: C10. Item 10 C9. Item 9 C8. Item 8 C7. Item 7 C6. Item 6 C5. Item 5 C4. Item 4 C3. Item 3 C2. Item 2 C1. Item 1

Solution 1:

The only solution I can come up with, with out using JS, is mostly a brute force solution. But if all of your lists are under 20 or 50... how ever many of these you feel like writing. You can match the length of the list and set the counter to that value then decrement the counter.

example for list of 10 items:

ol.cp {
    counter-reset: item;
    margin-left: 0;
    padding-left: 0;
}
ol.cpli {
    display: block;
    margin-bottom: .5em;
    margin-left: 2em;
}
ol.cpli:before {
    display: inline-block;
    content:"C"counter(item)". ";
    counter-increment: item -1;
    width: 3em;
    margin-left: -2em;
}

ol.cpli:first-child:nth-last-child(10) {
    counter-reset: item 11;
}

the problem is you need to create one for each length you want to match. Here are 1-10 and a sample - http://jsfiddle.net/Ue7dG/

ol.cpli:first-child:nth-last-child(1) {
    counter-reset: item 2;
}
ol.cpli:first-child:nth-last-child(2) {
    counter-reset: item 3;
}
ol.cpli:first-child:nth-last-child(3) {
    counter-reset: item 4;
}
ol.cpli:first-child:nth-last-child(4) {
    counter-reset: item 5;
}
ol.cpli:first-child:nth-last-child(5) {
    counter-reset: item 6;
}
ol.cpli:first-child:nth-last-child(6) {
    counter-reset: item 7;
}
ol.cpli:first-child:nth-last-child(7) {
    counter-reset: item 8;
}
ol.cpli:first-child:nth-last-child(8) {
    counter-reset: item 9;
}
ol.cpli:first-child:nth-last-child(9) {
    counter-reset: item 10;
}
ol.cpli:first-child:nth-last-child(10) {
    counter-reset: item 11;
}

Solution 2:

As @durbnpoisn mentioned, you can use the reversed property. the order is controlled by the HTML and not by the CSS. Also, notice that it's an HTML5 property.

For XHTML you will need javascript.

edit The reverse is changing only the counter, not the content. For content manipulation you must use javascript.

edit #2 Check this, but note that you must supply the upper bound for the list. Change these lines:

ol{
counter-reset: item 3; /* set the upper boundry for the list, where to start the countdown */
}
/* note that i've changed it to li:before */olli:before{
    counter-increment: item -1; /* negative counter */
}

Solution 3:

To reverse the order of custom numbering, we need to know the total number of items in the list and instruct the counter to start from that number and then decrement.

From your example, with 10 numbers in the list, we'll tell the counter to start at 11.

ol.cp {
    counter-reset: item 11;
    margin-left: 0;
    padding-left: 0;
}

And then set the counter to decrement by 1 on each item.

ol.cp:before {
    display: inline-block;
    content: "C"counter(item)". ";
    counter-increment: item -1;
    width: 3em;
    margin-left: -2em;
}

Solution 4:

When you create our list, reverse the order:

<ol reversed>
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ol>