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

Используя стандартный список, я пытаюсь выбрать последние 2 элемента списка. Я различные перестановки из An+B, но ничего, кажется, выбрать последние 2:Можно ли выбрать последние n элементов с nth-child?

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 не заботится).

источник

2011-01-30 DisgruntledGoat

IE несмотря на это, поддержку браузера для ': п-я последнего-ребенок () 'примерно такая же, как': nth-child() '[согласно quirksmode.org] (http://www.quirksmode.org/css/contents.html#t38). Кроме того, ': nth-child()' и ': nth-last-child()' оба были введены в CSS3, и в этом смысле они не старше и не новее. – BoltClock

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

источник

2011-01-30 17:55:08

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

@DisgruntledGoat Я тоже так думал, но, видимо, это не так ... –

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

источник

2011-01-30 17:57:05 Pointy

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

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

-2

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

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

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

источник

2011-01-30 18:02:30

Я пробовал это, и он не работает в IE8. – bobber205

http://jsbin.com/AhECUP/1 – bobber205

174

Это подберет последние два КСМОС из списка:

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>

источник

2011-06-30 23:29:42

Да, но вы используете ': nth-last-child()', о котором уже упоминалось. – BoltClock

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

+13

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

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

источник

2012-07-16 15:27:21

': nth-last-child()' уже упоминалось несколько раз... – BoltClock

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

ответ

Смежные вопросы