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

Tanım ve Kullanım

CSS :nth-of-type(n) Sanal sınıf, ebeveyn elementi içinde aynı türdeki (etiket adı) n'inci alt elementi eşleştirmek için kullanılır, n Herhangi bir türdeki bir alt elementin her bir elementi.

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

İpucu:Görünüm :nth-child() Sanal sınıf, ebeveyn elementi içinde n'inci alt elementi seçmek için kullanılır, n Herhangi bir türdeki bir alt elementin elementi, ne olursa olsun.

Örnek

Örnek 1

Kullanım: :nth-of-type() Seçici:

/* div kardeş elementindeki ikinci elementi seç */
div:nth-of-type(2) {
  background: red;
}
/* Listedeki ikinci li elementini seç */
li:nth-of-type(2) {
  background: lightgreen;
}
/* Her üçüncü kardeş element grubundaki her üçüncü elementi seç */
:nth-of-type(3) {
  background: yellow;
}

Kişisel olarak deneyin

Örnek 2

tek ve çift Anahtar kelime, tek veya çift indeksli 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-of-type(sıfır) {
  background: red;
}
p:nth-of-type(çift) {
  background: blue;
}

Kişisel olarak deneyin

Örnek 3

Formülü kullanarak (an + b) açıklama:a Bu, n'den başlayan tüm olumsuz sayısal adımları temsil eder, n 0'dan başlayan tüm olumsuz sayısal tamsayıdır,b Tamsayı kaydırma

Burada, 3'ün katları olan tüm <p> elementlerine arka plan rengi belirliyoruz (üçüncü, altıncı, dokuzuncu vb. elementleri seçiyoruz):

p:nth-of-type(3n+0) {
  background: red;
}

Kişisel olarak deneyin

Örnek 4

Burada, 3'ün katları olan tüm <p> elementlerine arka plan rengi belirliyoruz. Sonra 1'i çıkarıyoruz (ikinci, beşinci, sekizinci vb. elementleri seçiyoruz):

p:nth-of-type(3n-1) {
  background: red;
}

Kişisel olarak deneyin

CSS grameri

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

Teknik ayrıntılar

Tarayıcı desteği

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