IE8 :after not working with jQuery selector

Question

I was attempting to use :last-child 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 last-child class with CSS, doing the following:

$('.section-header > span:last-child').addClass('last-child');

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, located here (compared to an actual decent browser like Chrome):

• Top-nav, not removing last border-right property on <li> items
• #top-grid not adding in arrows (using :before and :after)
• .section-header not applying padding-left I have specified for both :last-child or .last-child (done with jQuery)
• Calendar, not adding in top border color to selected tabs

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!

Answer 1

The problem is that you're grouping both your :last-child and .last-child selectors in the same rule sets. This causes IE8 to ignore the entire rule set because of the :last-child part, meaning it'll ignore your .last-child part as well.

Since you're using jQuery to add the class anyway, you may as well remove the :last-child part of your selector and have it work in all browsers.

Or if you want browsers with scripting disabled to see your :last-child rule, you have to split up the selectors and duplicate your style rules for each selector.