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

130

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

css css-selectors DisgruntledGoat
источник

5

Несмотря на IE, поддержка браузером :nth-last-child()примерно такая же, как и :nth-child() согласно quirksmode.org . Кроме того , :nth-child()и :nth-last-child()были введены как в CSS3, и не старше или новее в этом смысле.

BoltClock

Множество полезных nth-childтрюков обобщено css-tricks

m7913d

275

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

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()что уже упоминалось.

BoltClock

6

(-n + 2) => Это то, что я ищу. Спасибо

Surjith SM

16

Это должен быть принятый ответ, да, nth-last-child уже упоминалось, но не совсем то, как (-n + b) является крутым трюком

BlackTigerX

Потрясающие! Спасибо!

Юлиан

56

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

Пекка
источник

Спасибо за ссылку - похоже, поддержка nth-child на самом деле такая же, как nth-last-child (я был уверен, что IE8 поддерживает nth-child, но, возможно, нет).

DisgruntledGoat

14

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

Данил Соболев
источник

1

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

Заостренный
источник

1

С помощью :nth-child()вы можете выбрать первые mэлементы, указав :nth-child(-n+m).

BoltClock

@BoltClock Мне нужно подумать об этом на секунду ... о, ну да, в этом ты прав. Ясно, что я не в состоянии сделать серьезное заявление о намерениях комитета при изобретении селекторов CSS3 :-)

Pointy

-2

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

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

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

Натан Андерсон
источник

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

Ответы: