CSS :nth-child() Söz Dizimi

Tanım ve Kullanım

CSS :nth-child(n)}} sahte sınıfları, ebeveyn elementinin n alt elementin herhangi bir elementi.

Bu sahte sınıf, elementin ebeveyn elementindeki alt liste içindeki indeksine göre elementi eşleştirir.

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

İpucu:Görünüm :nth-of-type() sahte sınıfları, ebeveyn elementi içindeaynı tür (etiket adı)nın n alt elementin elementi.

Örnek

Örnek 1

Kullanım: :nth-child() Sahte sınıf:

/* Her kardeş element grubundaki dördüncü elementi seç */
:nth-child(4) {
  background-color: sarı;
}
/* Div kardeş elementindeki ikinci elementi seç */
div:nth-child(2) {
  background-color: kırmızı;
}
/* Listedeki ikinci li elementini seç */
li:nth-child(2) {
  background-color: lightgreen;
}

Kişisel olarak deneyin

Örnek 2

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

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

p:nth-child(sıfır) {
  background-color: kırmızı;
}
p:nth-child(çift) {
  background: lightgreen;
}

Kişisel olarak deneyin

Örnek 3

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

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

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

Kişisel olarak deneyin

Örnek 4

Burada, 3'ün katları olan tüm <p> elementlerine arka plan rengi belirtiyoruz. Sonra 1'i çıkarıyoruz (ilk, dördüncü, yedinci vb. elementleri seçiyoruz):

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

Kişisel olarak deneyin

CSS dilbilgisi

:nth-child(dizin | tek | çift | an+b) {
  css ifadeleri;
}

Teknik ayrıntılar

Tarayıcı desteği

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