Geek Answers Handbook

HTML reverse numbering

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

  5. Red
 4. Green
 3. Blue
 2. Yellow
 1. Black
+4
source share
5 answers

You can do this using a simple fallback attribute with HTML, follow the link below for a full 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/

+4
source 
 <ol reversed="reversed"> <li>Red</li> <li>Green</li> <li>Blue</li> <li>Yellow</li> <li>Black</li> </ol>
0
source

HTML5 CR has a reversed attribute for such purposes, but this is not a good solution because it makes browser-dependent rendering. It was slowly implemented in browsers and, for example, IE does not support it even in version 10. In addition, it is (possibly) a presentation, and adding new presentation attributes to HTML is contrary to the general trend.

Some alternatives:

  • Add a value attribute for each li element. This can be done when creating the server page or using client-side JavaScript.
  • Use the ul element, suppress bullets ( list-style-type: none ) and put the numbers in the li content (possibly programmatically, as mentioned above). Why is ul , not ol ? Because you don't want double numbering when CSS is disabled.
  • As stated above, but use the generated content and counter in CSS.
0
source

You can use the reversed attribute of the ol tag. But does not support IE and opera.

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

There are many alternatives if you choose javascript instead of strictly following HTML and CSS.

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 : The Value attribute of the li tag is deprecated in HTML4, but reintroduced in HTML5. So of course, it remains a cross browser .

0
source

You can use CSS for this, but you need to specify an initial value. This is still simpler than populating the value attribute for each item in the list.

For example, using 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 above.

0
source

More articles:


All Articles