Nth-child ile son n öğeyi seçmek mümkün müdür?

130

Standart bir liste kullanarak, son 2 liste öğesini seçmeye çalışıyorum. Çeşitli permütasyonlara sahibim An+Bama hiçbir şey son 2'yi seçmiyor gibi görünüyor:

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

Gibi yeni bir CSS3 seçicinin farkındayım, :nth-last-child()ancak mümkünse birkaç tarayıcıda daha çalışan bir şeyi tercih ederim (özellikle IE'yi umursamayın).

css css-selectors

— DisgruntledGoat
kaynak

5

IE'ye rağmen, tarayıcı desteği quirksmode.org'a göre:nth-last-child() yaklaşık olarak aynıdır . Ayrıca ve her ikisi de CSS3'te tanıtıldı, bu anlamda ne eski ne de daha yeni. :nth-child() :nth-child():nth-last-child()

— BoltClock

Bir çok faydalı nth-childpüf noktası css-tricks

— m7913d

274

Bu, bir listenin son iki bölümünü seçecektir:

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>

Snippet'i genişlet

— John Guise
kaynak

Evet ama :nth-last-child()daha önce bahsedilmiş olanı kullanıyorsunuz .

— BoltClock

6

(-n + 2) => Aradığım şey bu. Teşekkürler

— Surjith SM

16

Bu kabul edilen cevap olmalı, evet, n'inci-son-çocuktan daha önce bahsedilmişti, ancak (-n + b) nasıl harika bir numara değil

— BlackTigerX

Müthiş! Teşekkür ederim!

— Yulian

56

nth-last-childBu sorunu çözmek için özel olarak tasarlanmış gibi görünüyor, bu yüzden daha uyumlu bir alternatif olup olmadığından şüpheliyim. Yine de destek oldukça iyi görünüyor .

— Pekka
kaynak

Bağlantı için teşekkürler - nth-child support aslında nth-last-child ile aynı gibi görünüyor (IE8'in nth-child'ı desteklediğinden emindim ama belki desteklemiyor).

— DisgruntledGoat

14

:nth-last-child(-n+2) hile yapmalı

— Danyl Sobolev
kaynak

1

Anlambiliminin tanımından dolayı, ilgili nth-childelemanların listesinin uzunluğunu dahil etmeden bunun nasıl mümkün olduğunu anlamıyorum. Anlambilimin amacı, bir grup alt öğenin tekrar eden gruplara ( düzenle - teşekkürler BoltClock) veya sabit uzunluktaki bir ilk parçaya, ardından "geri kalanı" ile ayrılmasına izin vermektir . Bunun tam tersini istiyorsunuz, nth-last-childsize veren budur .

— sivri
kaynak

1

İle belirterek :nth-child()ilk melemanları seçebilirsiniz :nth-child(-n+m).

— BoltClock

@BoltClock Bunu bir saniyeliğine düşünmem gerek ... oh, evet, bu konuda haklısın. Açıkçası, komitenin zaten CSS3 seçicilerini icat ederken niyetinin ne olduğu konusunda ciddi bir açıklama yapacak durumda değilim :-)

— Pointy

-2

Projenizde jQuery kullanıyorsanız veya onu dahil etmeye istekli iseniz nth-last-child, seçici API aracılığıyla çağırabilirsiniz (bu simüle edilmiştir, tarayıcıdan geçecektir). İşte bir nth-last-childeklentiye bağlantı . İlgilendiğiniz öğeleri hedeflemek için bu yöntemi kullandıysanız:

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

Ve sonra veya sözde seçiciler lastyerine sınıfı yeniden biçimlendirin, çok daha tutarlı bir çapraz tarayıcı deneyimine sahip olacaksınız.nth-childnth-last-child

— Nathan Anderson
kaynak