How can I make my elements fade out the higher the count number?

Question

My HTML looks like this..

<div class=chocolateSandwich>
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
  <div>5</div>
</div>

So I want item 5 to be the least visible IE opacity .1 and item 1 to have say opacity 1 or .9.. I could obviously do it based on the value it the child number for each one hard coded but I feel like in CSS there is a way to say given the count of the object then apply a lower opacity value.

A non elegant solution would be to have the css rules..

.chocolateSandwich:nth-child(4) { opacity:.1 }
.chocolateSandwich:nth-child(3) { opacity:.3 }
.chocolateSandwich:nth-child(2) { opacity:.5 }
.chocolateSandwich:nth-child(1) { opacity:.7 }
.chocolateSandwich:nth-child(0) { opacity:.9 }

Answer 1

This cannot be achieved with CSS alone, you can use LESS CSS and this will become very easy. If you do not wish to use LESS CSS you can use JavaScript or jQuery.

Here is a link: http://lesscss.org/

If you can't figure it out, let me know and I'll write the code in LESS.

Good Luck :D