CODEWITHSUNDEEP
jquery
rwb
rwb

Reputation: 4478

jQuery and last-child not working in IE8

I'm tearing my hair out over this one - its driving me mad because it should be so simple.

In my site i use :last-child to remove the border-bottom from the last element of a twitter feed:

ul#twitter li:last-child {
    border: none;
}

This works fine in Firefox / Chrome, but not IE8 which doesn't support last-child. So, i turned to jQUery and put this in my <head>

<!--[if IE 8]>
    <script type="text/javascript">
        $(document).ready(function(){  
            $('ul#twitter li:last-child').css('border','none !important');
        });
    </script>
<![endif]-->

This has no effect? Ive tried using an external file, making it not IE8 specific, with and without document ready... Ive also tried tested the selector in Firebug to make sure my jQuery is correct and it all works? Any ideas?

The site is here

Thank you for your help

Upvotes: 1

Views: 2251

Answers (3)

MatthiasLaug
MatthiasLaug

Reputation: 2914

maybe it is better to use 

$('ul#twitter li').last();

or

$('ul#twitter li:last');

as your selector

Upvotes: 0

Gabriele Petrioli
Gabriele Petrioli

Reputation: 196002

Your code is just fine, the problem happens because you include the jQuery library at the bottom of the page, but your run your IE8 script at the top.

jQuery is not loaded yet, so your script fails (and throws an error as well, '$' is undefined)

Move the code after the jQuery inclusion and you should be set.

Upvotes: 2

Rory McCrossan
Rory McCrossan

Reputation: 337570

Try using :last instead of :last-child:

$('ul#twitter li:last').css(...)

For reference, :last-child looks for the last child element within the set - so in your case would look for the last child element of inside the li elements within ul#twitter.

:last just looks for the last element within the set, so for you would match the last li itself within ul#twitter.

Upvotes: 1

Related Questions