Applying Style to last li in a ul with CSS / Jquery

Question

Given the following HTML:

<ul>
   <li><div>Some content</div></li>
   <li><div>some more content</div></li>
   <li><div>final content</div></li>
</ul>

I would like to apply a top border around each div. On the last div I would like to put a bottom border. I am targeting IE7/8. I have the top border working fine, I need help getting the bottom border.

I've tried:

   ul > li:last-child > div
    {
        border-bottom: solid 1px black;
    }

I've also tried using last-type-of.

I am looking for a CSS solution and a Jquery solution

Answer 1

:last-child doesn't work in IE7 (not sure on IE8), so you'll have to do the jquery route. Your css lines up pretty much the same way the selectors would work in jquery:

$('ul > li:last > div').addClass('someclass');

Answer 2

$("#yourUL li:last div").css({'border-bottom':'solid 1px black'});

Answer 3

Why do you have a <div> inside the <li>? Completely possible without that.

Anyways, this is how to do it with jQuery:

$('ul > li:last-child > div').css('border-bottom','1px solid black');

Answer 4

Here's a CSS only solution:

Apply the bottom border to the ul. To make it work cross-browser, remove the padding from the ul and bump the list over with a margin.

ul.border {border-bottom:1px solid #000;padding:0;margin-left:40px;}
ul.border li {border-top:1px solid #000;}

<ul class="border">
   <li>Some content</li>
   <li>some more content</li>
   <li>final content</li>
</ul>

Answer 5

:last-child is CSS3, unlike :first-child which was introduced in CSS2, and has no IE support while. I believe the following is the safest way to implement it using jquery

$('li').last().addClass('someClass');