: nth-last-child - CSS Hileleri

Anonim

:nth-last-childSeç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-childYukarıdan değil, kaynak sırasının altından başlayan öğeleri seçmesi dışında aynı işlevi görür .

Bilinmeyen sayıda öğe içeren bir listemiz olduğunu varsayalım 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-child:

li ( background: slategrey; ) /* select the second-last item */ li:nth-last-child(2) ( background: lightslategrey; )

Gördüğünüz gibi, :nth-last-childbir argüman alıyor: bu, tek bir tam sayı, "çift" veya "tek" anahtar kelimeleri veya bir formül olabilir. Bir tamsayı belirtilirse, yalnızca bir öğe seçilir - ancak anahtar kelimeler veya bir formül, ana öğenin tüm alt öğelerini yineler ve JavaScript'teki bir dizideki öğelerde gezinmeye benzer şekilde 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). 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 :

Bu Kaleme bakın!

Neyse ki, matematiği her zaman kendiniz yapmak zorunda değilsiniz - orada birkaç :nth-last-childtest edici ve üretici var:

  • CSS Hileleri Test Cihazı
  • Lea Verou'nun Testçisi

İlgi noktaları

  • :nth-last-childkaynak sıranın en altından başlayarak öğeleri yineler. :nth-childOnunla arasındaki tek fark , ikincisinin, kaynak sırasının en üstünden başlayarak öğeler arasında yinelenmesidir.
  • :nth-last-childSelektör çok benzer :nth-last-of-typeama bir ile kritik fark: daha az özeldir. Yukarıdaki örneğimizde li, 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-child-it'in yalnızca iki nokta üst üste işaretinden önce belirtilen öğeleri değil, bir düzenlemedeki herhangi bir kardeş öğeyi seçebileceğini ortaya çıkarır .

Tarayıcı Desteği

Krom Safari Firefox Opera IE Android iOS
İşler 3.2+ İşler 9.5+ 9+ İşler İşler

:nth-last-childCSS 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.