Изменение CSS за последние <li> - PullRequest
Новая
       34

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

74 голосов
/ 25 августа 2009

Мне интересно, есть ли способ изменить атрибут CSS для последнего li в списке с помощью CSS. Я пытался использовать :last-child, но это кажется действительно ошибочным, и я не могу заставить его работать на меня. Я буду использовать JavaScript, чтобы сделать это при необходимости, но я хочу знать, может ли кто-нибудь придумать решение в CSS.

Ответы [ 10 ]

100 голосов
/ 25 августа 2009

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

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

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

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

$$("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");

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

49 голосов
/ 06 ноября 2012

Я сделал это с чистым 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;
}
11 голосов
/ 25 августа 2009

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

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

li:last-child,li.last-child{ /* ... */ }
9 голосов
/ 25 августа 2009

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

$("li:last-child").addClass("someClass");
6 голосов
/ 26 августа 2009

Одной альтернативой для 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 глючит, но только в той степени, в которой он будет выбирать некоторые корневые элементы (тип документа или html) и может не изменять стили, если вставлены другие элементы.

4 голосов
/ 10 марта 2015

2015 Ответ : CSS последнего типа позволяет стилизовать последний элемент. 

ul li:last-of-type { color: red; }
3 голосов
/ 26 августа 2009

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

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

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

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

Принимая во внимание, что в моем основном файле CSS я получил: 

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

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

2 голосов
/ 26 августа 2010

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

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

он выберет только последний li.
2 голосов
/ 22 апреля 2010

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

$('li').last().addClass('someClass');
0 голосов
/ 26 августа 2009

Если вы знаете, что в списке, который вы просматриваете, есть три 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 не получит лучшую поддержку.

...