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

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

5 ответов


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

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>

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


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


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


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

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

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