title: CSS to match the last match of a selector?
body: <p>I have a structure like:</p>
  
  <pre><code>&lt;div id="holder"&gt;
      &lt;div id="first"&gt;&lt;/div&gt;
      &lt;div class="box"&gt;I'm the first&lt;/div&gt;
      &lt;div class="box"&gt;Nothing special&lt;/div&gt;
      &lt;div class="box"&gt;Nothing special&lt;/div&gt;
      &lt;div class="box"&gt;Nothing special&lt;/div&gt;
      &lt;div class="box"&gt;Nothing special&lt;/div&gt;
      &lt;div class="box"&gt;Nothing special&lt;/div&gt;
      &lt;div class="box"&gt;Make this background orange!!!&lt;/div&gt;
      &lt;div id="last"&gt;&lt;/div&gt;
  &lt;/div&gt;​
  </code></pre>
  
  <p>I need the last <code>.box</code> element to have an orange background. </p>
  
  <p><code>.box:last-child{}</code> won't work because it isn't the last child. Apart from wrapping only the <code>.box</code>'s in an element, is there any way to do this? This problem does represent what I'm trying to do, but I'd also like to know if there is a way to match the last matched element of a selector.</p>
  
  <p><a href="http://jsfiddle.net/walkerneo/KUa8B/1/" rel="noreferrer">http://jsfiddle.net/walkerneo/KUa8B/1/</a></p>
  
  <p>Extra notes:</p>
  
  <ul>
  <li>No javascript </li>
  <li>No giving the last element an extra class</li>
  </ul>