CSS :nth-last-of-type() Saklı Sınıfı

Tanım ve Kullanım

CSS :nth-last-of-type(n) Saklı sınıf, ebeveyn elementi olarak belirli türdeki son n Her element.

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

İpucu:Görüntüle :nth-last-child() Saklı sınıf, ebeveyn elementi olarak son n Herhangi bir türdeki bir alt elementin elementi, ne olursa olsun.

Örnek

Örnek 1

Ebeveyn elementi olarak son ikinci <p> elementi olan her <p> elementine arka plan rengi belirliyoruz.

Aynı zamanda, ebeveyn elementi olarak son üçüncü <li> elementi olan her <li> elementine arka plan rengi belirliyoruz:

p:nth-last-of-type(2) {
  background: red;
}
li:nth-last-of-type(3) {
background: yellow;
}

Kişisel Deneyim

Örnek 2

tek ve çift Anahtar kelime, tek veya çift indeksli olan alt elementleri eşleştirmek için kullanılabilir (ilk alt elementin indeksi 1'dir).

Burada, çift ve tek indeksli <p> elementlerine farklı arka plan renkleri belirliyoruz:

p:nth-last-of-type(tek) {
  background: red;
}
p:nth-last-of-type(çift) {
  background: blue;
}

Kişisel Deneyim

Örnek 3

Formül (an + b) kullanarak açıklama: a, tam sayı adımı, n, 0'dan başlayan tüm olumsuz sayılar, b, tam sayı kaymasıdır.

Burada, 3 ile çarpılan sayıya tam olarak bölünen son indeksli tüm <p> ve <li> elementlerine arka plan rengi belirliyoruz:

p:nth-last-of-type(3n) {
  background: red;
}
li:nth-last-of-type(3n) {
  background: yellow;
}

Kişisel Deneyim

CSS Grameri

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

Teknik Ayrıntılar

Tarayıcı Desteği

Tabloda numaralar, bu sahte sınıfı tam olarak destekleyen ilk tarayıcı sürümünü belirtir.