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

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');