CSS :nth-child() Seçicisini Anlamak

Tüm CSS seçiciler gibi, bir web sayfasındaki öğeleri tanımlamak ve bunlara stil uygulamak için :nth-child() işlevini kullanabilirsiniz. Ancak bu seçici, kardeş gruplarını göreceli konumlarına göre daraltmanıza olanak tanır.

Seçici, yaygın durumlar için bazı temel anahtar sözcükleri destekler, ancak aynı zamanda güçlü bir kalıp eşleştirme sözdizimi de sağlar. Bunu kullanarak, ihtiyaçlarınıza göre düzenli, tekrarlanan kalıplara veya daha karmaşık tanımlara dayalı öğeleri seçebilirsiniz.

:nth-child() Seçici Söz Dizimi

Olarak CSS sözde sınıf seçicisi:nth-child() sözdizimi diğer seçicilerden farklıdır. Bir kardeş kümesindeki öğeleri eşleştirmek için bir model olarak bir argüman alır:

:nth-child(args) {
/*...*/
}

Ana odak noktası parantez içindeki argümanlardır. Bu bağımsız değişkenler seçilecek öğelerin alt kümesini tanımlar.

Yaygın Durumlar İçin Anahtar Kelime Değerlerini Kullanma

Bu seçici iki anahtar kelime değerini barındırabilir:

garip Ve eşit. Özellikle aşağıdakiler için faydalıdırlar: bir tabloda alternatif satırları şekillendirme.

Basit bir sıralı liste, bu anahtar kelime değerlerini ne zaman kullanabileceğinize dair iyi bir örnektir:

<ol>
<li>Item 1li>
<li>Item 2li>
<li>Item 3li>
<li>Item 4li>
<li>Item 5li>
<li>Item 6li>
<li>Item 7li>
ol>

Kullanmak :n'inci-çocuk (tek) seçiciyi kullanarak her alternatif öğenin rengini değiştirebilirsiniz:

:nth-child(odd) {
color: red;
}

Öğeler dizin 1'den başlar, dolayısıyla ilk öğe kırmızı görünür, ardından üçüncü öğe vb. görünür:

Daha Fazla Esneklik için Fonksiyonel Gösterim

Tek bir öğeyi seçmek için tek bir tam sayı kullanabilirsiniz, örneğin:

li:nth-child(4) {
color: red;
}

Bu durumda seçici yalnızca listedeki dördüncü öğeyle eşleşir:

Bu sözdizimi, belirli bir kalıpla eşleşen öğeleri seçen daha genel işlevsel sözdiziminin özel bir durumudur. Bu sözdizimi şöyledir:

:nth-child(An+B) {
/*...*/
}

Bu gösterimde, A adım boyutudur. Bu, seçicinin bir sonraki öğeyi seçmek için hareket etme sayısı anlamına gelir. Her diğer öğeyi, her üç öğeyi vb. seçmenizi sağlar. B seçimin başladığı başlangıç ​​noktasıdır.

Örneğin 3n+1 argümanını ele alalım:

li:nth-child(3n+1) {
color: red;
}

Bu, seçime ilk öğeden başlayacak ve bundan sonra her üçüncü öğeyle devam edecektir:

Bunu 3n+2 ifadesiyle karşılaştırın:

li:nth-child(3n+2) {
color:red;
}

Bu hâlâ her üç öğeden birini seçiyor ancak artık listedeki ikinci öğeden başlıyor:

Bir başka ilginç örnek ise :n'inci-çocuk (n+3):

li:nth-child(n+3) {
color: red;
}

Bu, üçüncüden (+3) başlayarak her öğeyi (n) seçecektir. Bunun gibi görünecek:

Belirli sonuçlara ulaşmak için çıkarma işlemini de kullanabilirsiniz:

li:nth-child(3n-1) {
color: red;
}

Bu örnekte hala her üç öğeden biri seçiliyor ancak "eksi ilk"ten başlıyor. Aslında bu, listedeki ikinci öğeyi, ardından beşinciyi vb. seçeceği anlamına gelir:

Arasında Sözdizimi

Anahtar kelimeyi de kullanabilirsiniz ile ilgili ardından bir seçici :nth-child() seçicisinde bir argüman olarak. Bu sözdizimi, normal desenin seçebileceği olası öğeleri daraltmanıza olanak tanır.

Örneğin, işaretlemenizin orijinalinden daha karmaşık olduğunu düşünün:

<ol>
<liclass="old">Item 1li>
<liclass="new">Item 2li>
<liclass="new">Item 3li>
<liclass="old">Item 4li>
<liclass="new">Item 5li>
<liclass="new">Item 6li>
<liclass="new">Item 7li>
ol>

Şimdi, belirli bir sınıfa sahip olanlar kümesinden çift öğeleri seçmek için :nth-child öğesini kullanın:

.new {
font-weight: bold;
}
li:nth-child(evenof.new) {
color: red;
}

Yalnızca çift sayılı kalın öğelerin kırmızı olduğuna dikkat edin:

Ayrıca bunun diğerlerinden ne kadar farklı olduğunu da düşünün. li.new: n'inci çocuk (çift) .new öğelerini hedef alır, ancak yalnızca eşit olmaları durumunda. Bu, yukarıdaki örnekte 2. ve 6. öğeler olacaktır.

:nth-child() Seçiciyle Çalışmak

:nth-child() seçiciyi kullanarak benzersiz tasarımlar elde edebilirsiniz. Renkli web siteleri oluşturabilir ve veri tablolarındaki satırları ve sütunları vurgulayabilirsiniz. Bunu diğer CSS seçicilerle birleştirmek, karmaşık düzenler ve tasarımlar oluşturmanıza yardımcı olacaktır.