it-swarm.com.ru

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

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

74
PF1

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

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

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

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

100
Lucas Jones

Я сделал это с чистым 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;
}
50
pano

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

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

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

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

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

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

6
DisgruntledGoat

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

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

Обычно я делаю это, создавая 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, было бы Дин Эдвардс ie7.js библиотека.

3
vise

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

если у вас есть несколько

  • группа будет выбирать только последний li.
  • 2
    jaeson

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

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

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

    0
    strager