Применение стиля к последнему элементу с помощью CSS / Jquery

Question

С учетом следующего HTML:

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

Я хотел бы применить верхнюю границу вокруг каждого элемента. На последнем div я хотел бы поставить нижнюю границу. Я нацеливаюсь на IE7 / 8. У меня верхняя граница работает нормально, мне нужна помощь в получении нижней границы.

Я пробовал:

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

Я также пытался использовать last-type-of.

Я ищу решение CSS и решение Jquery

Answer 1

Почему у вас <div> внутри <li>? Полностью возможно без этого.

В любом случае, вот как это сделать с помощью jQuery:

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

Answer 2

: last-child - это CSS3, в отличие от : first-child , который был представлен в CSS2 и пока не поддерживает IE. Я полагаю, что следующий - это самый безопасный способ реализовать это с помощью jquery

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

Answer 3

Вот решение только для CSS:

Применить нижнюю границу к ул. Чтобы он работал в кросс-браузерном режиме, удалите отступы из ul и увеличьте список с полем.

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 4

:last-child не работает в IE7 (не уверен в IE8), поэтому вам придется выполнить маршрут jQuery. Ваш CSS выстраивается почти так же, как селекторы будут работать в jQuery:

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

Answer 5

Я не уверен, зачем вам нужен "<div>" внутри "<li>", но если он вам не нужен, вы можете просто использовать:

ul > li:last-child {

Я проверил это и работал на меня в Chrome, ie8, Firefox и Safari.

Answer 6

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