Чи можливо вибрати останні n елементів із nth-дочіркою?

130

Використовуючи стандартний список, я намагаюся вибрати два останні списки. У мене різні перестановки, 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

— Невдоволений козак
джерело

5

Незважаючи на те, що підтримка веб-переглядача :nth-last-child()приблизно така сама, як :nth-child() за даними quirksmode.org . Крім того, :nth-child()і :nth-last-child()обидва вони були введені в CSS3, і в цьому сенсі не є ні старшим, ні новішим.

— BoltClock

Дуже багато корисних nth-childхитрощів узагальнено css-трюками

— m7913d

273

У цьому розділі виберуться два останні елементи списку:

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-дитини насправді така сама, як n-та-остання дитина (я був впевнений, що IE8 підтримує nth-дитину, але, можливо, ні).

— НевдоволенийЗабез

14

:nth-last-child(-n+2) повинен зробити трюк

— Данила Соболєва
джерело

1

Через визначення семантики nth-child, я не бачу, як це можливо, не включаючи довжину списку задіяних елементів. Суть семантики полягає в тому, щоб дозволити поділ купу дочірніх елементів на групи, що повторюються ( відредагувати - спасибі BoltClock) або на першу частину якоїсь фіксованої довжини, а потім "решту". Ви начебто хочете протилежне тому, що саме nth-last-childвам дає.

— Точковий
джерело

1

За допомогою :nth-child()ви можете вибрати перші mелементи, вказавши :nth-child(-n+m).

— BoltClock

@BoltClock Мені доведеться подумати над цим на секунду ... о, ну так, ти маєш рацію з цим. Ясна річ, що я не в змозі серйозно висловитись щодо того, яким був намір комітету при винаході селекторів CSS3 :-)

— Поні

-2

Якщо ви використовуєте jQuery у своєму проекті або бажаєте включити його, ви можете зателефонувати nth-last-childчерез його селекторний API (це імітація перетинає браузер). Ось посилання на nth-last-childплагін. Якщо ви взяли цей метод націлювання на елементи, які вас цікавили:

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

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

— Натан Андерсон
джерело