title: IE8 :after not working with jQuery selector
body: <p>I was attempting to use <code>:last-child</code> with IE8, but after reading several threads about this here, determined, it's just not happening 'bub. So - I went the next best route, which was using jQuery to append on the <code>last-child</code> class with CSS, doing the following:</p>
  
  <pre><code>$('.section-header &gt; span:last-child').addClass('last-child');
  </code></pre>
  
  <p>which does add the appropriate class in IE8. But, when I go to style that, it does not seem to be working. This is apparent in a few places on the site, <a href="http://zslabs.com/sample/cofc/" rel="nofollow">located here</a> (compared to an actual decent browser like Chrome):</p>
  
  <ul>
  <li>Top-nav, not removing last <code>border-right</code> property on <code>&lt;li&gt;</code> items</li>
  <li><code>#top-grid</code> not adding in arrows (using <code>:before</code> and <code>:after</code>)</li>
  <li><code>.section-header</code> not applying <code>padding-left</code> I have specified for both <code>:last-child</code> or <code>.last-child</code> (done with jQuery)</li>
  <li>Calendar, not adding in top border color to selected tabs</li>
  </ul>
  
  <p>So - there's obviously quite a few areas of inconsistencies - I'm not really looking for a "here's how you fix every single one individually", more a "here's a concept your missing about IE8". I've already tried declaring a doctype (another thread had mentioned that), but after a few hours, you begin to drive yourself crazy :) I really would appreciate any nudges in the right direction. Thanks!</p>