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

Question

Возможно ли это? Если нет, то есть ли способ сделать это с помощью jQuery?

Answer 1

Это возможно с 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

Answer 2

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

также сыграет.

Answer 3

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

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

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

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

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

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

http://jsfiddle.net/qkzdJ/

Answer 4

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