title: Apply css last-child to an element that is not the immediate child in ul li
body: <p>I have this HTML --</p>
  
  <pre><code>&lt;ul class="parent"&gt;
  &lt;li&gt;
      &lt;div class="child-1 x"&gt;
          &lt;div class="child-2 x"&gt;test&lt;/div&gt;
      &lt;/div&gt;
  &lt;/li&gt;
  &lt;li&gt;
      &lt;div class="child-1 x"&gt;
          &lt;div class="child-2 x"&gt;test&lt;/div&gt;
      &lt;/div&gt;
  &lt;/li&gt;
  &lt;li&gt;
      &lt;div class="child-1 x"&gt;
          &lt;div class="child-2 x"&gt;test&lt;/div&gt;
      &lt;/div&gt;
  &lt;/li&gt;
  &lt;/ul&gt;
  </code></pre>
  
  <p>And this CSS --</p>
  
  <pre><code>.x{
      border:1px solid black;
      padding: 10px;
  }
  .child-1:last-child{
      border-color:red;
  }
  </code></pre>
  
  <p><a href="http://jsfiddle.net/BDj2h/1/" rel="nofollow">http://jsfiddle.net/BDj2h/1/</a></p>
  
  <p>Im trying to apply red border only to the last <code>child-1 div</code>. But its not happening. CSS <code>last-child</code> pseudo class checks whether its the last element inside its immediate parent, not in the whole DOM(which was my wrong understanding).</p>
  
  <p>Any idea how to do this with css only?</p>