Изменение CSS для последнего <li>

Ответ 1

:last-child - это действительно единственный способ сделать это без изменения HTML-кода, но если вы это сделаете, основной вариант - дать ему class="last-item", а затем сделать:

li.last-item { /* ... */ }

Очевидно, что вы можете автоматизировать это на динамическом языке генерации страниц по вашему выбору. Кроме того, в W3C DOM есть свойство JavaScript lastChild.

Вот пример того, что вы хотите сделать в Prototype:

$$("ul").each(function(x) { $(x.lastChild).addClassName("last-item"); });

Или еще проще:

$$("ul li:last-child").each(function(x) { x.addClassName("last-item"); });

В jQuery вы можете записать его еще компактнее:

$("ul li:last-child").addClass("last-item");

Также обратите внимание, что это должно работать без использования фактического селектора CSS last-child, скорее, используется его реализация JavaScript, поэтому он должен быть менее глючным и более надежным в браузерах.

Ответ 2

Я сделал это с чистым CSS (возможно, потому, что я родом из будущего - на 3 года позже, чем все остальные: P)

Предположим, что у нас есть список:

<ul id="nav">
  <li><span>Category 1</span></li>
  <li><span>Category 2</span></li>
  <li><span>Category 3</span></li>
</ul>

Тогда мы можем легко сделать текст последнего элемента красным с помощью:

ul#nav li:last-child span {
   color: Red;
}

Ответ 3

Я обычно совмещаю подходы CSS и JavaScript, так что он работает без JavaScript во всех браузерах, но IE6/7 и в IE6/7 с включенным JavaScript (но не выключен), поскольку они не поддерживают псевдонимы :last-child класс.

$("li:last-child").addClass("last-child");

li:last-child,li.last-child{ /* ... */ }

Ответ 4

Вы можете использовать jQuery и сделать это как таковой

$("li:last-child").addClass("someClass");

Ответ 5

Одной из альтернатив для IE7 + и других браузеров может быть использование :first-child вместо этого и инвертирование ваших стилей.

Например, если вы устанавливаете маржу на каждом li:

ul li {
  margin-bottom: 1em;
}
ul li:last-child {
  margin-bottom: 0;
}

Вы можете заменить его следующим:

ul li {
  margin-top: 1em;
}
ul li:first-child {
  margin-top: 0;
}

Это будет хорошо работать для некоторых других случаев, таких как границы.

В соответствии с sitepoint, :first-child ошибка, но только в том случае, если он выберет некоторые корневые элементы (doctype или html ) и не может изменять стили, если вставлены другие элементы.

Ответ 6

Обычно я делаю это, создавая файл htc (например, last-child.htc):

<attach event="ondocumentready" handler="initializeBehaviours" />
<script type="text/javascript">
function initializeBehaviours() {
  this.lastChild.className += ' last-child';
}
</script>

И вызовите его из моего условного CSS файла IE с помощью

ul { behavior: url("/javascripts/htc/last-child.htc"); }

В то время как в моем основном файле css я получил:

ul li:last-child,
ul li.last-child {
  /* some code */
}

Еще одно решение (хотя и медленнее), использующее вашу существующую разметку css без определения какого-либо класса .last-child, будет Dean Edwards ie7.js библиотека.

Ответ 7

2015: CSS last-of-type позволяет вам стилизовать последний элемент.

ul li:last-of-type { color: red; }

Ответ 8

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

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

Ответ 9

$( 'ли') в прошлом() addClass ( 'SomeClass');.

если у вас несколько групп

Ответ 10

Если вы знаете, что в списке, на который вы смотрите, есть три li, вы можете сделать это:

li + li + li { /* Selects third to last li */
}

В IE6 вы можете использовать выражения:

li {
    color: expression(this.previousSibling ? 'red' : 'green'); /* 'green' if last child */
}

Я бы рекомендовал использовать специализированный класс или Javascript (а не выражения IE6), хотя селектор :last-child получает лучшую поддержку.