Czy można wybrać ostatnie n pozycji z n-dzieckiem?

Korzystając ze standardowej listy, próbuję wybrać 2 ostatnie elementy listy. Mam różne permutacje An+B ale nic nie wydaje się, aby zaznaczyć ostatnią 2:Czy można wybrać ostatnie n pozycji z n-dzieckiem?

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 */

Jestem świadomy nowych selektorów CSS3 jak :nth-last-child() ale wolałbym coś, co działa w kilku innych przeglądarek (jeśli to możliwe nie przejmuj się szczególnie IE).

Źródło

2011-01-30 DisgruntledGoat

IE Niezależnie od tego, Przeglądarki obsługiwane przez ': nth-last-child () 'jest mniej więcej takie samo jak': nth-child() '[zgodnie z quirksmode.org] (http://www.quirksmode.org/css/contents.html#t38). Również ': nth-child()' i ': nth-last-child()' zostały wprowadzone w CSS3, ani nie są starsze ani nowsze w tym sensie. – BoltClock

nth-last-child Wygląda na to, że został zaprojektowany specjalnie w celu rozwiązania tego problemu, więc wątpię, czy istnieje bardziej kompatybilna alternatywa. Wsparcie wygląda jednak na pretty decent.

Źródło

2011-01-30 17:55:08

Dzięki za link - wygląda na to, że wsparcie dla n-dzieci jest w rzeczywistości takie samo, jak w przypadku n-tego-ostatniego dziecka (byłem pewien, że IE8 wspiera n-dziecko, ale może nie). – DisgruntledGoat

@DisgruntledGoat Też tak myślałem, ale najwyraźniej to nie ... –

Z powodu definicji semantyki nth-child, nie widzę, jak to jest możliwe bez uwzględnienia długości listy zaangażowanych elementów. Celem semantyki jest umożliwienie segregacji grupy elementów potomnych w powtarzające się grupy (dzięki BoltClock) lub w pierwszej części o określonej długości, po której następuje "reszta". Ty sortujesz - chcesz czegoś przeciwnego, co daje ci nth-last-child.

Źródło

2011-01-30 17:57:05 Pointy

Za pomocą ': nth-child()' możesz wybrać pierwsze elementy 'm', podając': nth-child (-n + m) ' . – BoltClock

@BoltClock Będę musiał o tym pomyśleć przez chwilę ... oh, więc tak, masz rację. Najwyraźniej nie jestem w stanie wypowiedzieć się poważnie na temat tego, co było intencją komitetu, kiedy wynaleziono selektory CSS3 :-) – Pointy

-2

Jeśli korzystasz z jQuery w swoim projekcie lub chcesz go uwzględnić, możesz zadzwonić pod numer nth-last-child za pośrednictwem selektora API (jest to symulowane, aby przejść przez przeglądarkę). Here is a link do wtyczki nth-last-child. Jeśli wziął tę metodę kierowania elementy, które zainteresowały:

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

A potem znowu styl klasę zamiast nth-child lub nth-last-child pseudo selektorów last, trzeba będzie dużo bardziej spójne doświadczenie przeglądarki krzyż.

Źródło

2011-01-30 18:02:30

Próbowałem tego i nie działa w IE8. – bobber205

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

174

ten wyłoni dwa ostatnie iems z listy:

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>

Źródło

2011-06-30 23:29:42

Tak, ale używasz ': nth-last-child()', o którym już wspomniano. – BoltClock

(-n + 2) => Tego właśnie szukam. Dzięki –

+13

To powinna być zaakceptowana odpowiedź, tak, nth-last-child już wspomniano, ale nie do końca, jak (-n + b) jest fajną sztuczką – BlackTigerX

:nth-last-child(-n+2) powinno wystarczyć

Źródło

2012-07-16 15:27:21

': nth-last-child()' zostało już wymienione kilka razy... – BoltClock

Czy można wybrać ostatnie n pozycji z n-dzieckiem?

Odpowiedz

Powiązane problemy