How to Display a Reverse-Ordered List in Html

How to display a reverse-ordered list in HTML?

You could rotate the parent element 180deg and then rotate the children elements -180deg.

ul {
    transform: rotate(180deg);
}
ul > li {
    transform: rotate(-180deg);
}

Example Here

Alternatively, you could use flex boxes along with the order property.

Although this isn't technically reversing the order, you could also use counter-increment along with a psuedo element.

Example Here

ul {
    list-style-type:none;
    counter-reset:item 6;
}
ul > li {
    counter-increment:item -1;
}
ul > li:after {
    content: counter(item);
}

Reverse numbering for a list in HTML

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/

Reverse the numbering order for ordered lists

You have to set the counter-reset value for each ol is equal to the number of child + 1

var ol_elements = document.getElementsByTagName("ol");//console.log(ol_elements[0].children.length)for (var i = 0; i < ol_elements.length; i++) {  ol_elements[i].setAttribute('style', 'counter-reset: item ' + (ol_elements[i].children.length + 1));}

body {  font: 13px Verdana}
ol {  list-style-type: none;  margin-left: 20px;  padding: 0px;}
ol>li {  counter-increment: item -1;}
ol>li:before {  content: "[" counter(item) "]";  padding-right: 10px;}

<div id="content">  <ol>    <li>1</li>    <li>2</li>    <li>3</li>  </ol>  <ol>    <li>4</li>    <li>5</li>  </ol>  <ol>    <li>6</li>    <li>7</li>    <li>8</li>    <li>9</li>  </ol></div>

li items list in reverse

You have this on your css:

nav li {
    float: right;
    padding-top: 1em;
    padding-bottom: 1.3em;
    padding-right: 1.1em;
    padding-left: 1.1em;
    vertical-align: middle;
}

The float right sets your first item to the far right position, then the second items on it left and so on ... which reverses the order. Then you have a float left for your "Nira" item that sets it to the far left.

You can refer to this for more details: HTML float right element order

Reverse ul ordering using CSS 2.1

I would use inline-block instead of float:

#Header #Navigation ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
  background-color: #5D2C2C;
  text-align: right;
}

#Header #Navigation li {
   display: inline-block;
}

That way the order would not be reversed.

Reverse the numbering order across multiple OL (not list order)

Using CSS Counters

Currently there is no way to fully automate reverse numbering across multiple ol elements (without reversing the order of display of list items) with CSS counters when the no. of elements is dynamic. If reversing the order of display of list on the whole is fine, have a look at this answer.

You can make use of a bit of JavaScript along with counters to achieve this. The approach would be as follows:

Using JS, get the count (liCount) of applicable li elements when the page is loaded.
Set liCount as the second parameter for the counter-reset property on the parent container which would contain all the applicable ol elements. The second parameter to counter-reset property represents the initial/start value of the counter.
In CSS, set -1 as the second parameter for the counter-increment property. Generally the second parameter is the number by which the counter would be incremented every time. Here, since the value is set as -1 the counter would actually get decremented.
As normal, display the value of the counter using a :before pseudo element.

window.onload = function() {  var liCount = document.querySelectorAll('ol > li').length;  document.body.setAttribute('style', 'counter-reset: li ' + (liCount + 1));}

ol {  list-style-type: none;  margin-left: 20px;  padding: 0px;}ol > li {  counter-increment: li -1;}ol > li:before {  content: "[" counter(li) "]";  padding-right: 10px;}

<div id="content">  <h3>Year</h3>  <ul>    <li><a href="#2010-2015">2010-2015</a></li>    <li><a href="#2007-2008">2007-2008</a></li>  </ul></div><h3 id="2010-2015">2010-2015</h3><ol>  <li>A</li>  <li>B</li>  <li>C</li></ol><h3 id="2007-2008">2007-2008</h3><ol>  <li>D</li>  <li>E</li></ol>

How to reverse the ordering of list items in an unordered list

An HTMLCollection is only a read-only view of nodes. In order to manipulate nodes, you have to use one of the various DOM manipulation methods. In your case, there happens to be a shortcut; all you need do is to append the child nodes in reverse order.

var birds = document.getElementById("birds");
var i = birds.childNodes.length;
while (i--)
  birds.appendChild(birds.childNodes[i]);

Edit: What's happening is that appendChild removes the node from the document before appending it. This has two effects: a) it saves you from having to make a copy of the list of nodes and removing them before appending them in reverse order, and b) it reverses the order of nodes as it goes, since it appends the last child first and the first child list.

How to Display a Reverse-Ordered List in Html