CSS :nth-last-child() Sanal Sınıfı

Tanım ve Kullanım

CSS :nth-last-child(n) Sanal sınıf, ebeveyn öğesi olarak sonraki n. alt öğesini seçmek için kullanılır, ne türse olsun.

n Bir sayı/index, bir anahtar kelime (tek veya çift) veya bir formül (örneğin an + b)

İpucu:Görünüm :nth-last-of-type() Sanal sınıf, ebeveyn öğesi içinde belirtilen türdeki sonraki n. alt öğesini seçmek için kullanılır. n alt öğesinin öğesi.

Örnek

Örnek 1

Her birinin ebeveyn öğesi olarak son ikinci alt öğesi olan <p> öğeleri için arka plan rengi belirtin:

p:nth-last-child(2) {
  background-color: kırmızı;
}

Kişisel olarak deneyin

Örnek 2

tek ve çift Anahtar kelime, tek veya çift indeksli alt öğeleri eşleştirmek için kullanılabilir.

Burada, sonraki indeksleri tek ve çift olan tüm <p> öğeler için farklı arka plan renkleri belirtiyoruz:

p:nth-last-child(tek) {
  background-color: kırmızı;
}
p:nth-last-child(çift) {
  background-color: mavi;
}

Kişisel olarak deneyin

Örnek 3

Formülü kullanarak (an + bAçıklama:a Tamsayı adımını temsil eder, n, 0'dan başlayan tüm olumsuz sayılardır,b Tamsayı kaymasıdır.

Burada, 3'ün katları olan sonraki indeksli tüm <p> öğeler için arka plan rengi belirtiyoruz:

p:nth-last-child(3n+0) {
  background-color: kırmızı;
}

Kişisel olarak deneyin

CSS Dilbilgisi

:nth-last-child(index | tek | çift | an+b) {
  css deklarasyonları;
}

Teknik Ayrıntılar

Tarayıcı Desteği

Tabloda sayılar, bu sanal sınıfı tam olarak destekleyen ilk tarayıcı sürümünü belirtir.