0

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

I found this link which perfectly describes how to achieve a custom numbering in ascending order. How can I modify the following to get a reverse custom numbering and apply it to only a specific listing?

<!DOCTYPE html>
<html>
<style>
ol.cp {
    counter-reset: item;
    margin-left: 0;
    padding-left: 0;
}
ol.cp li {
    display: block;
    margin-bottom: .5em;
    margin-left: 2em;
}
ol.cp:before {
    display: inline-block;
    content: "C"counter(item)". ";
    counter-increment: item;
    width: 3em;
    margin-left: -2em;
}
</style>
<body>
<h2>My Items</h2>
    <p>
        <ol reversed>
            <li>item 10</li>
            <li>item 9</li>
            <li>item 8</li>
            <li>item 7</li>
            <li>item 6</li>
            <li>item 5</li>
            <li>item 4</li>
            <li>item 3</li>
            <li>item 2</li>
            <li>item 1</li>
        </ol>
    </p>
    <p>
        <ol class="cp" reversed>
            <li>item 10</li>
            <li>item 9</li>
            <li>item 8</li>
            <li>item 7</li>
            <li>item 6</li>
            <li>item 5</li>
            <li>item 4</li>
            <li>item 3</li>
            <li>item 2</li>
            <li>item 1</li>
        </ol>
    </p>
</body>

</html>

The result of the above code is illustrated in the following picture. enter image description here

Community
  • 1
  • 1
afp_2008
  • 1,940
  • 1
  • 19
  • 46

4 Answers4

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.cp li {
    display: block;
    margin-bottom: .5em;
    margin-left: 2em;
}
ol.cp li:before {
    display: inline-block;
    content:"C"counter(item)". ";
    counter-increment: item -1;
    width: 3em;
    margin-left: -2em;
}

ol.cp li: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.cp li:first-child:nth-last-child(1) {
    counter-reset: item 2;
}
ol.cp li:first-child:nth-last-child(2) {
    counter-reset: item 3;
}
ol.cp li:first-child:nth-last-child(3) {
    counter-reset: item 4;
}
ol.cp li:first-child:nth-last-child(4) {
    counter-reset: item 5;
}
ol.cp li:first-child:nth-last-child(5) {
    counter-reset: item 6;
}
ol.cp li:first-child:nth-last-child(6) {
    counter-reset: item 7;
}
ol.cp li:first-child:nth-last-child(7) {
    counter-reset: item 8;
}
ol.cp li:first-child:nth-last-child(8) {
    counter-reset: item 9;
}
ol.cp li:first-child:nth-last-child(9) {
    counter-reset: item 10;
}
ol.cp li:first-child:nth-last-child(10) {
    counter-reset: item 11;
}
Scott
  • 1,648
  • 13
  • 21
0

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 */
ol li:before{
    counter-increment: item -1; /* negative counter */
}
yossi
  • 3,090
  • 7
  • 45
  • 65
  • yossi: doesn't ` ` indicate the browser should use `html5`? – afp_2008 Apr 09 '14 at 20:34
  • Unfortunately, the above answers do not produce the result I am looking for. I am using `reversed` along with `CSS`, which I posted in the question but the order is not descending. – afp_2008 Apr 09 '14 at 20:48
  • yossi: I modified the question and added the code to it. Thanks for the comment. – afp_2008 Apr 09 '14 at 21:02
  • Thanks. I only need the counter to be reversed. The items are placed in the reverse order – afp_2008 Apr 09 '14 at 21:23
  • Thanks. Can I make setting the upper boundary automatic such that the code itself determines how many items are in the list? – afp_2008 Apr 09 '14 at 22:02
  • 1
    as i wrote in the begining - for that you will need js – yossi Apr 09 '14 at 22:05
0

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;
}
Etin
  • 365
  • 1
  • 9
-1

When you create our list, reverse the order:

<ol reversed>
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ol>
durbnpoisn
  • 4,666
  • 2
  • 16
  • 30
  • this does not work. I am actually defining my reverse order list the way you kindly posted. the custom numbering comes out as `C1`, `C2`, `C3`, ... in ascending order not in reverse order. – afp_2008 Apr 09 '14 at 19:14