S söz dizimiyle :nth-child() seçimleri üzerinde daha fazla kontrol

An+B mantığını uygulamadan önce bir alt öğe grubuna önceden filtre uygulayın.

Bramus

:nth-child() ve :nth-last-child() sözde sınıf seçiciler

:nth-child() sözde sınıf seçici sayesinde DOM'daki öğeleri, dizinlerine göre seçebilirsiniz. An+B mikro söz dizimi sayesinde, seçmek istediğiniz öğeleri ayrıntılı bir şekilde kontrol edebilirsiniz.

  • :nth-child(2): 2. çocuğu seçin.
  • :nth-child(2n): Çift numaralı tüm alt öğeleri seçin (2., 4., 6., 8. vb.).
  • :nth-child(2n+1): Tek numaralı tüm alt öğeleri seçin (1., 3., 5., 7. vb.).
  • :nth-child(5n+1): 1. (=(5×0)+1), 6. (=(5×1)+1), 11. (=(5×2)+1), ... alt öğeyi seçin.
  • :nth-child(5n+2): 2. (=(5×0)+2), 7. (=(5×1)+2), 12. (=(5×2)+2), ... alt öğeyi seçin.

Ancak A parametresini çıkararak daha fazla reklam öğesi seçimi yapabilirsiniz. Örneğin:

  • :nth-child(n+3): 3. sınıftan sonraki tüm çocuğu seçin (3., 4., 5. vb.).
  • :nth-child(-n+5): 5. çocuğa kadar her çocuğu seçin (1., 2., 3., 4., 5.).

Bu :nth-child() seçimlerinden birkaçını birleştirerek öğe aralıkları seçebilirsiniz:

  • :nth-child(n+3):nth-child(-n+5): 3. çocuktan 5. sınıfa kadar (3., 4., 5.) tüm çocuğu seçin.

:nth-last-child() kullanarak benzer seçimler yapabilirsiniz, ancak saymaya baştan başlamak yerine baştan saymaya başlarsınız.

Seçimler of S söz dizimiyle önceden filtreleniyor

CSS Seçiciler Düzey 4 ile sunulan yeni özellik, isteğe bağlı olarak :nth-child() ve :nth-last-child() ürünlerine seçici listesi iletme olanağı sağlar.

:nth-child(An+B [of S]?)
:nth-last-child(An+B [of S]?)

of S belirtildiğinde, An+B mantığı yalnızca belirtilen S seçici listesiyle eşleşen öğelere uygulanır. Yani An+B gerekli işlemi yapmadan önce alt öğeleri önceden filtreleyebilirsiniz.

Tarayıcı Desteği

  • 111
  • 111
  • 113
  • 9

Örnekler

Örneğin :nth-child(2 of .highlight), .highlight sınıfını içeren ikinci eşleşen öğeyi seçer. Farklı bir ifadeyle: .highlight sınıfındaki tüm çocuklar arasından ikincisini seçin.

Bu, .highlight sınıfını içeren öğeyi seçen ve aynı zamanda ikinci alt öğe olan .highlight:nth-child(2) ile çelişkilidir.

Aşağıdaki demoda bu farkı görebilirsiniz:

  • :nth-child(2 of .highlight) ile eşleşen öğenin dış çizgisi pembe.
  • .highlight:nth-child(2) ile eşleşen öğenin dış çizgisi yeşildir.

S bir seçici listesidir, yani virgülle ayrılmış birden çok seçiciyi kabul eder. Örneğin, :nth-child(4 of .highlight, .sale), bir eşdüzey grubundan .highlight veya .sale olan dördüncü öğeyi seçer.

Aşağıdaki demoda :nth-child(4 of .highlight, .sale) ile eşleşen öğeye turuncu bir dış çizgi uygulanmıştır.

Zebra çizgili, yeniden ziyaret edilmiş

:nth-child() işlevinin kullanıldığı klasik bir örnek, zebra çizgili bir tablo oluşturmaktır. Bu, her tablo satırının renkleri değiştirdiği görsel bir tekniktir. Normalde bu yaklaşım aşağıdaki gibi olur:

tr:nth-child(even) {
  background-color: lightgrey;
}

Bu, statik tablolarda sorunsuz çalışsa da tablo içeriklerini dinamik olarak filtrelemeye başladığınızda sorunlu hale gelir. Örneğin, ikinci satır gizlendiğinde, her biri aynı arka plan rengine sahip birinci ve üçüncü satırlar görünür hale gelir.

Bunu düzeltmek için gizli satırları An+B mantığından hariç tutarak :nth-child(An+B [of S]?) özelliğinden yararlanabiliriz:

tr:nth-child(even of :not([hidden])) {
  background-color: lightgrey;
}

Çok tatlı, değil mi?

Fotoğraf: Markus Spiske'in Unsplash