CODEWITHSUNDEEP
htmlcss
Rahul Naidu
Rahul Naidu

Reputation: 43

Reverse numbering for a list in HTML

I want to know how to create a reverse list using css/html for eg

5. Red
4. Green
3. Blue
2. Yellow
1. Black

Upvotes: 4

Views: 1441

Answers (5)

amit mishra
amit mishra

Reputation: 64

You can do that by using simple reserve attribute with HTML go to following link for complete explanation 

<ol reversed>  
    <li>Red</li>  
    <li>Green</li>  
    <li>Blue</li>  
    <li>Yellow</li>  
    <li>Black</li>  
</ol>

see fiddle http://jsfiddle.net/sYSEJ/

Upvotes: 4

Ariel
Ariel

Reputation: 26753

You can use CSS to do this, but you need to specify the starting value. This is still easier than filling in the value attribute on each list element.

For example with 4 list items do:

ol {
  counter-reset: num 5;
  list-style-type: none;
}

li:before {
  counter-increment: num -1;
  content: counters(num, ".") " ";
}

This works in IE8 and up.

Upvotes: 0

Mr_Green
Mr_Green

Reputation: 41832

You can use reversed attribute of ol tag. But it doesn't support IE and opera.

  • If you want a cross-browser support solution, then you need to look in to javascript.
  • Or else, why not just use other elements like div or span and assign the numbers dynamically using javascript?

There are many alternatives, if you opt javascript instead of going strictly with HTML and CSS.

An example: (using javascript)

<ol id="olTag">..............

ChangeNumbering();    
function ChangeNumbering() {
    var list = document.getElementById("olTag");
    var liTags = list.getElementsByTagName("li");
    var length = liTags.length;
    for (var i = length; i > 0; i--) {
        liTags[length - i].value = i;
    }
}

JSFIDDLE

Side Note: Value attribute of li tag was deprecated in HTML4, but again re-introduced in HTML5. So, ofcourse it remains cross-browser.

Upvotes: 0

Jukka K. Korpela
Jukka K. Korpela

Reputation: 201568

HTML5 CR has the reversed attribute for such purposes, but it’s a wrong solution, because it makes the rendering browser-dependent. It has been slowly implemented in browsers, and e.g. IE does not support it even in version 10. Moreover, it is (arguably) presentational, and adding new presentational attributes to HTML is against the general trend.

Some alternatives:

  1. Add value attribute to each li element. This can be done when generating the page server-side, or with client-side JavaScript.
  2. Use a ul element, suppress bullets (list-style-type: none), and put numbers into li content (possibly programmatically, as above). Why ul and not ol? Because you don’t want double numbering when CSS is off.
  3. As above, but use generated content and a counter in CSS.

Upvotes: 0

Nilesh
Nilesh

Reputation: 193

<ol reversed="reversed">
  <li>Red</li>
  <li>Green</li>
  <li>Blue</li>
  <li>Yellow</li>
  <li>Black</li>
</ol>

Upvotes: 0

Related Questions