Reversing order of ordered list counter in CSS - css

Question

I have a snippet to let you better understand my question:
$(window).load(function() {
var total;
$(document).ready(function() {
$('#dupe').click(function() {
$('#uploadForms').prepend($('#htmlTemplate').html());
$($('#uploadForms .upload_form')[0]).animate({
height: $($('#uploadForms .upload_form')[$('#uploadForms .upload_form').size() - 1]).css('height'),
opacity: 1
}, 500);
totalForms();
$(".upload_form").each(function() {
if (typeof $(this).find('a.close')[0] === 'undefined') {
if ($('#uploadForms .upload_form').size() > 1) $(this).prepend('<a class="close">x</a>');
}
});
$(".upload_form").on("click", ".close", function() {
$(this).parent().animate({
height: 0,
opacity: 0,
paddingTop: 0,
paddingBottom: 0
}, 500, function() {
$(this).parent().remove();
totalForms()
});
if ($('#uploadForms .upload_form').size() - 1 <= 1) $('#uploadForms .upload_form').find('a.close').remove();
});
});
function totalForms() {
total = $('#uploadForms .upload_form').size();
$('#total').html(total);
}
});
});
.upload_form {
background-color: rgba(0, 0, 0, .3);
padding: 16px 64px 10px 76px;
border-bottom-left-radius: 15px;
border-bottom-right-radius: 15px;
margin-bottom: 10px;
}
.coverArt {
margin-right: 48px;
margin-bottom: 36px;
}
label input,
label textarea {
width: 252px;
}
.info {
display: block;
vertical-align: top;
}
.close {
float: right;
color: white;
margin: 10px;
display: block;
cursor: hand;
border-radius: 100%;
cursor: pointer;
width: 18px;
height: 18px;
text-align: center;
-moz-user-select: none;
-webkit-user-select: none;
}
.close:hover {
background-color: rgba(0, 0, 0, 0.5);
}
ol {
counter-reset: li;
margin-left: 0;
padding-left: 0;
}
ol > li {
position: relative;
margin: 0 0 6px 2em;
padding: 0px 0px 8px;
list-style: none;
border-top: 2px solid #666;
}
ol > li:before {
content: counter(li);
counter-increment: li;
position: absolute;
top: -2px;
left: -2em;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
width: 2em;
margin-right: 8px;
padding: 4px;
border-top: 2px solid #666;
color: #fff;
background: #666;
font-weight: bold;
font-family: "Helvetica Neue", Arial, sans-serif;
text-align: center;
}
li ol,
li ul {
margin-top: 6px;
}
ol ol li:last-child {
margin-bottom: 0;
}
.template {
display: none
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<input type="button" value="Add file..." id="dupe">
<input type="button" value="Upload file(s)" id="dupe">
<hr>
<p>Total: <span id="total">1</span></p>
<div id="htmlTemplate" class="template">
<li>
<div class="upload_form" style="height:0;opacity:0;">
<span class="number"></span>
<a class="close">x</a>
<div class="info">
<p>Filler</p>
</div>
</div>
</li>
</div>
<ol id="uploadForms">
<li>
<div class="upload_form">
<span class="number"></span>
<a class="close">x</a>
<div class="info">
<p>Filler</p>
</div>
</div>
</li>
</ol>
In this demo if you click "Add file..." then a new list element will be added with a new <div> inside. My question is: how to reverse the order of the counter?
Related CSS:
ol {
counter-reset:li;
}
ol > li {
position:relative;
margin:0 0 6px 2em;
padding: 0px 0px 8px;
list-style:none;
border-top:2px solid #666;
}
ol > li:before {
content: counter(li);
counter-increment:li;
position:absolute;
top:-2px;
left:-2em;
box-sizing:border-box;
width:2em;
margin-right:8px;
padding:4px;
border-top:2px solid #666;
color:#fff;
background:#666;
font-weight:bold;
font-family:"Helvetica Neue", Arial, sans-serif;
text-align:center;
}

Answer 1

I don't have a pure CSS solution, but your page is already quite JS-heavy, so I think it will be okay.
For the li add
counter-increment: li -1;
To make it count backwards. This means that it can't reset at 0, but it has to reset at the total elements.
For ol start with
counter-reset:li 2;
And then update your JS:
$('#total').html(total);
$("ol").css('counter-reset', 'li ' + (+total + 1));
http://jsfiddle.net/ExplosionPIlls/ArZUW/1/

Answer 2

Here's another solutions very similar to the one by Explosion Pills: http://jsfiddle.net/pN6Fx/
CSS
ol{
list-style-type: none;
list-style-position: inside;
}
li:before{
content: counter(list-items) '. ';
counter-increment: list-items -1;
}
HTML
<ol style="counter-reset: list-items 5;">
<li>An element</li>
<li>An element</li>
<li>Another element</li>
<li>A third element</li>
</ol>
You just need to update counter-reset property via JavaScript

Answer 3

Following this page http://www.impressivewebs.com/reverse-ordered-lists-html5/ exists the reversed attribute for the <ol> element.
Bad enough I don't understand if is supported

Answer 4

If you're looking for a pure css solution and support browsers with Flexbox, you can take advantage of the flex-direction property to reverse the order of the list items.
This would give the appearance of a reversed list, but the DOM order wouldn't actually change.

Answer 5

Although the browser support is currently poor, instantiating a <reversed-counter-name> via the reversed() function is a pure CSS way to do what the OP is asking.
You can instantiate this on an <ol> like this:
ol {
counter-reset: reversed(list-item) // or any other counter name in scope
}
where list-item is the name of the stylesheet's default counter.
Here is a JSFiddle demo - it currently needs to be run in Firefox due to browser support limitations.