title: Color Scale over List
body: <p>I have an unordered list that may contain up to 10 items.  Within each <code>li</code> is a numeric value.  I want the first number to be green, the last number to be yellow, and each number between to be scaled between the two accordingly.</p>
  
  <p>I'm curious if this can be done with css3 alone, or if I'd need JavaScript to calculate the interim and apply it (I could probably work out a JS solution on my own, but I don't know it's worth it at the moment)</p>
  
  <p>Essentially I'd replace the <code>number-good</code> classes (e.g., green) with the scaled value instead.</p>
  
  <pre><code>&lt;ul id="dash-top-customer-list" class="tb-list"&gt;
      &lt;li class="tb-list-item" data-dym-id="8"&gt;
          &lt;span class="tb-list-name"&gt;OEM2&lt;/span&gt;&lt;span class="tb-list-value number-good"&gt;$208,057&lt;/span&gt;
      &lt;/li&gt;
      &lt;li class="tb-list-item" data-dym-id="13"&gt;
          &lt;span class="tb-list-name"&gt;Potential3&lt;/span&gt;&lt;span class="tb-list-value number-good"&gt;$206,988&lt;/span&gt;
      &lt;/li&gt;
      &lt;li class="tb-list-item" data-dym-id="9"&gt;
          &lt;span class="tb-list-name"&gt;REP1&lt;/span&gt;&lt;span class="tb-list-value number-good"&gt;$191,029&lt;/span&gt;
      &lt;/li&gt;
      &lt;li class="tb-list-item" data-dym-id="14"&gt;
          &lt;span class="tb-list-name"&gt;Potential4&lt;/span&gt;&lt;span class="tb-list-value number-good"&gt;$187,609&lt;/span&gt;
      &lt;/li&gt;
      &lt;li class="tb-list-item" data-dym-id="15"&gt;
          &lt;span class="tb-list-name"&gt;Potential5&lt;/span&gt;&lt;span class="tb-list-value number-good"&gt;$183,372&lt;/span&gt;
      &lt;/li&gt;
  &lt;/ul&gt;
  </code></pre>
  
  <p>(this is hardly a must-have, and the question is more a curiosity than anything - I was surprised I couldn't find a pertinent question already asked (or my google-fu is really in the can today))</p>