:nth-last-of-typeSeçici bir formüle göre, onların kaynak sırasına göre bir veya daha fazla öğeleri seçin sağlar. CSS Seçiciler Seviye 3 spesifikasyonunda bir "yapısal sözde sınıf" olarak tanımlanmıştır, yani içeriği ana ve kardeş öğelerle olan ilişkisine göre biçimlendirmek için kullanılır. :nth-of-typeYukarıdan değil, kaynak sırasının altından başlayan öğeleri seçmesi dışında aynı işlevi görür .
Diyelim ki sırasız bir listemiz var ve ikinci ila son öğeyi vurgulamak istiyoruz (bu tam örnekte, "Dördüncü Öğe"):
- First Item
- Second Item
- Third Item
- Fourth Item
- Fifth Item
Liste öğesine bir sınıf eklemek gibi bir şey yapmak yerine (örneğin .highlight) kullanabiliriz :nth-last-of-type:
li ( background: slategrey; ) /* select the second-last item */ li:nth-last-of-type(2) ( background: lightslategrey; )Gördüğünüz gibi, :nth-last-of-typebir argüman alıyor: bu, tek bir tam sayı, "çift" veya "tek" anahtar kelimeleri veya bir formül olabilir. Bir tam sayı belirtilirse, yalnızca bir öğe seçilir - ancak anahtar kelimeler veya formül, JavaScript'teki bir dizideki öğelerde gezinmeye benzer şekilde, ana öğenin tüm alt öğelerini yineler ve eşleşen öğeleri seçer. "Çift" ve "tek" anahtar sözcükleri anlaşılırdır (sırasıyla 2, 4, 6, vb veya 1, 3, 5 vb.). Formül sözdizimi kullanılarak oluşturulur an+b; burada:
- "A" bir tamsayı değeridir
- "N" gerçek "n" harfidir
- "+" Bir operatördür ve "+" veya "-" olabilir
- "B" bir tam sayıdır ve formüle bir operatör dahil edilirse gereklidir
Bu formülün bir denklem olduğuna dikkat etmek önemlidir ve hangisinin seçileceğini belirleyerek her bir kardeş öğe boyunca yinelenir. Formülün "n" kısmı, dahil edilmişse, bir dizi artan pozitif tamsayıları temsil eder (tıpkı bir dizide yineleme gibi). Yukarıdaki örneğimizde, 2nişe yarayan formülle her ikinci öğeyi seçtik, çünkü bir öğe her kontrol edildiğinde, "n" bir arttı (2 × 0, 2 × 1, 2 × 2, 2 × 3, vb.). Bir elemanın sırası denklemin sonucuyla eşleşirse, seçilir (2, 4, 6, vb.). İlgili matematiğin daha ayrıntılı bir açıklaması için lütfen bu makaleyi okuyun.
Daha fazla açıklamak için, aşağıda geçerli :nth-last-of-typeseçicilere bazı örnekler verilmiştir :
CodePen'de Chris Coyier (@chriscoyier) tarafından yazılan Pen CSS-Püf Noktalarına bakın:
Neyse ki, matematiği her zaman kendiniz yapmak zorunda değilsiniz - orada birkaç :nth-last-of-typetest edici ve üretici var:
- CSS Hileleri Test Cihazı
- Lea Verou'nun Testçisi
İlgi noktaları
:nth-last-of-typekaynak sıranın en altından başlayarak öğeleri yineler.:nth-of-typeOnunla arasındaki tek fark , ikincisinin kaynak sırasının en altından başlayarak öğeler arasında yinelenmesidir.:nth-last-of-typeSelektör çok benzer:nth-last-childama bir ile kritik fark: daha özeldir. Yukarıdaki örneğimizdeli, sadece öğeler üzerinde yinelediğimiz için aynı sonucu üretirler , ancak daha karmaşık bir kardeş grubu üzerinde yineliyorsak,:nth-last-childyalnızca aynı öğe türünden kardeşleri değil, tüm kardeşleri eşleştirmeye çalışırdık. Bu,:nth-last-of-type-it'in gücünü ortaya çıkarır, tüm kardeşlerle değil, benzer kardeşlerle ilişkili bir düzenlemede belirli bir öğe türünü hedefler.
Tarayıcı Desteği
| Krom | Safari | Firefox | Opera | IE | Android | iOS |
|---|---|---|---|---|---|---|
| İşler | 3.2+ | İşler | 9.5+ | 9+ | İşler | İşler |
:nth-last-of-typeCSS Seçiciler Modül 3'te tanıtıldı, yani tarayıcıların eski sürümleri onu desteklemiyor. Bununla birlikte, modern tarayıcı desteği kusursuzdur ve yeni sözde seçiciler, üretim ortamlarında yaygın olarak kullanılmaktadır. Daha eski bir tarayıcı desteğine ihtiyacınız varsa, ya IE için çoklu doldurma ya da bu seçicileri, tavsiye edilen aşamalı geliştirme gibi kritik olmayan şekillerde kullanın.