Как выбрать последние 2 элемента в списке css nth-child?

Ответ 1

К сожалению, это невозможно. , Не обращайте внимания на этот ответ и посмотрите на ответкители ниже.

Если бы это было возможно, это выглядело бы как...

ul li:last-child+li {...}

Но это не сработает, потому что + выберет непосредственного брата после последнего ребенка (что, конечно же, ничего). Нет непосредственного предыдущего селектора.

Существуют различные способы достижения этого с помощью jQuery, наиболее эффективным будет...

var lastItems = $("#list li");
lastItems.slice(lastItems.length - 2).addClass("whatever");

http://jsfiddle.net/qkzdJ/

Ответ 2

Это возможно с помощью CSS3. Рассмотрим разметку:

<ul>
    <li><a href="">First item</a></li>
    <li>Second item</li>
    <li><a href="">Test</a></li>
    <li><a href="">Test</a></li>
    <li><a href="">Pre-last item</a></li>
    <li><a href="">Last item</a></li>
</ul>

Чтобы выбрать последние два элемента LI, выполните следующие действия:

ul > li:nth-last-of-type(-n+2) {
    background: green;
}

Работает во всех современных браузерах, включая IE9, но исключая IE8 и ниже. Чтобы добавить поддержку для этих браузеров, вы можете использовать Selectivizr.js

Ответ 3

:last-child,
:nth-last-child(2) {
  ruleset
}

будет играть также.

Ответ 4

Для меня это было так: li:not(:nth-last-child(-n+2))