Можно ли выбрать последние n элементов с nth-child?

Используя стандартный список, я пытаюсь выбрать последние 2 элемента списка. У меня разные перестановки An+B, но ничто не отображает последние 2:

li:nth-child(n+2) {} /* selects from the second onwards */
li:nth-child(n-2) {} /* selects everything */
li:nth-child(-n+2) {} /* selects first two only */
li:nth-child(-n-2) {} /* selects nothing */

Я знаю о новых селекторах CSS3, таких как :nth-last-child(), но я бы предпочел что-то, что работает в нескольких браузерах, если это возможно (особенно это касается IE).

Ответы

Ответ 1

nth-last-child звучит так, будто он был специально разработан для решения этой проблемы, поэтому я сомневаюсь, есть ли более совместимая альтернатива. Поддержка выглядит довольно приличный, однако.

Ответ 2

Это выберет два последних списка:

li:nth-last-child(-n+2) {color:red;}

<ul>
  <li>fred</li>
  <li>fred</li>
  <li>fred</li>
  <li>fred</li>
  <li>fred</li>
  <li>fred</li>
  <li>fred</li>
  <li>fred</li>
  <li>fred</li>
  <li>fred</li>
</ul>

Ответ 3

:nth-last-child(-n+2) должен сделать трюк

Ответ 4

Из-за определения семантики nth-child, я не вижу, как это возможно, не включая длину списка задействованных элементов. Точка семантики состоит в том, чтобы разрешить сегрегацию кучки дочерних элементов в повторяющиеся группы (редактировать - благодаря BoltClock) или в первую часть некоторой фиксированной длины, за которой следует "остальное". Вы предпочитаете противоположное тому, что дает вам nth-last-child.

Ответ 5

Если вы используете jQuery в своем проекте или хотите его включить, вы можете вызвать nth-last-child через свой API-интерфейс (это будет имитировано, что он перекроет браузер). Вот ссылка на плагин nth-last-child. Если вы использовали этот метод таргетинга на интересующие вас элементы:

$('ul li:nth-last-child(1)').addClass('last');

И затем снова создайте класс last вместо псевдоселекторов nth-child или nth-last-child, у вас будет гораздо более последовательное использование кросс-браузера.