:nth-childSeçici bir formüle göre, onların kaynak düzenine dayalı bir veya daha fazla eleman seçmenize olanak sağlar.
/* Select the first list item */ li:nth-child(1) ( ) /* Select the 5th list item */ li:nth-child(5) ( ) /* Select every other list item starting with first */ li:nth-child(odd) ( ) /* Select every 3rd list item starting with first */ li:nth-child(3n - 2) ( ) /* Select every 3rd list item starting with 2nd */ li:nth-child(3n - 1) ( ) /* Select every 3rd child item, as long as it has class "el" */ .el:nth-child(3n) ( )CSS Seçiciler Seviye 3 spesifikasyonunda "yapısal sözde sınıf" olarak tanımlanmıştır, yani içeriği ana ve kardeş öğelerle olan ilişkisine göre biçimlendirmek için kullanılır.
Bir CSS ızgarası oluşturduğumuzu ve her dördüncü ızgara modülündeki marjı kaldırmak istediğimizi varsayalım. İşte o HTML:
One Two Three Four Five Her dördüncü öğeye bir sınıf eklemek yerine (örneğin .last), kullanabiliriz :nth-child:
.module:nth-child(4n) ( margin-right: 0; ):nth-childSeçici bir argüman alır: Bu tek bir tam sayı, anahtar sözcükler olabilir even, oddya da bir formül. Bir tamsayı belirtilirse, yalnızca bir öğe seçilir, ancak anahtar kelimeler veya formül, bir JavaScript dizisindeki öğelerde gezinmeye benzer şekilde, ana öğenin tüm alt öğelerini yineler ve eşleşen öğeleri seçer. "Çift" ve "tek" anahtar sözcükleri anlaşılırdır (sırasıyla 2, 4, 6 vb. Veya 1, 3, 5). Formül sözdizimi kullanılarak oluşturulur an+b; burada:
- "A" bir tamsayı değeridir
- "N" gerçek "n" harfidir
- "+" Bir operatördür ve "+" veya "-" olabilir
- "B" bir tam sayıdır ve formüle bir operatör dahil edilirse gereklidir
Bu formülün bir denklem olduğuna dikkat etmek önemlidir ve hangisinin seçileceğini belirleyerek her bir kardeş öğe boyunca yinelenir. Formülün "n" kısmı, dahil edilmişse, bir dizi artan pozitif tamsayıları temsil eder (tıpkı bir dizide yineleme gibi). Yukarıdaki örneğimizde, 4nişe yarayan formülle her dördüncü elemanı seçtik çünkü bir eleman her kontrol edildiğinde, "n" bir arttı (4 × 0, 4 × 1, 4 × 2, 4 × 3, vb.). Bir elemanın sırası denklemin sonucuyla eşleşirse, seçilir (4, 8, 12, vb.). İlgili matematiğin daha ayrıntılı bir açıklaması için lütfen bu makaleyi okuyun.
Daha fazla açıklamak için, aşağıda geçerli :nth-childseçicilere bazı örnekler verilmiştir :
Neyse ki, matematiği her zaman kendiniz yapmak zorunda değilsiniz - orada birkaç :nth-childtest edici ve üretici var:
- CSS Hileleri Test Cihazı
- Lea Verou'nun Testçisi
: nth-çocuk (an + b)
:nth-childCSS Seçiciler spesifikasyonuna göre eklenebilecek az bilinen bir filtre vardır : Biçimi :nth-childkullanarak bir öğe alt kümesini seçme yeteneği of . Karma içerik listeniz olduğunu varsayalım: Bazılarında sınıf var .video, bazılarında sınıf var .pictureve siz ilk 3 resmi seçmek istiyorsunuz. Bunu "/" filtresiyle şu şekilde yapabilirsiniz:
:nth-child(-n+3 of .picture) ( /* Selects the first 3 elements applied not to ALL children but only to those matching .picture */ )Bunun doğrudan seçiciye bir seçici eklemekten farklı olduğunu unutmayın :nth-child:
.picture:nth-child(-n+3) ( /* Not the same! This applies to elements matching .picture which _also_ match :nth-child(-n+3) */ )Bu biraz kafa karıştırıcı olabilir, bu nedenle bir örnek farkı göstermeye yardımcı olabilir:
"/" Filtresi için tarayıcı desteği çok sınırlıdır: Bu yazı itibariyle, yalnızca Safari sözdizimini destekledi. Sık kullandığınız tarayıcının durumunu kontrol etmek için, aşağıdakilerle ilgili açık sorunlar şunlardır :nth-child(an+b of s):
- Firefox: nth-child için destek (An + B of sel)
- Chrome: Uygulama: nth-child (an + b of S)
İlgi noktaları
:nth-childkaynak sırasının en üstünden başlayarak öğeleri yineler.:nth-last-childOnunla arasındaki tek fark , ikincisinin kaynak sırasının en altından başlayarak öğeler arasında yinelenmesidir.- İlk
neleman sayısını seçmek için sözdizimi biraz sezgiseldir.-nSeçmek istediğiniz pozitif öğe sayısının yanı sıra ile başlarsınız . Örneğinli:nth-child(-n+3), ilk 3liöğeyi seçecektir . :nth-childSelektör çok benzer:nth-of-typeama bir ile kritik fark: daha az özeldir. Yukarıdaki örneğimizde.module, sadece öğeler üzerinde yinelediğimiz için aynı sonucu üretirler , ancak daha karmaşık bir kardeş grubu üzerinde yineliyorsak,:nth-childyalnızca aynı öğe türünden kardeşleri değil, tüm kardeşleri eşleştirmeye çalışırdık. Bu,:nth-child-it'in yalnızca iki nokta üst üste işaretinden önce belirtilen öğeleri değil, bir düzenlemedeki herhangi bir kardeş öğeyi seçebileceğini ortaya çıkarır .
Tarayıcı Desteği
| Krom | Safari | Firefox | Opera | IE | Android | iOS |
|---|---|---|---|---|---|---|
| Hiç | 3.2+ | Hiç | 9.5+ | 9+ | Hiç | Hiç |
:nth-childCSS Seçiciler Modül 3'te tanıtıldı, yani tarayıcıların eski sürümleri onu desteklemiyor. Bununla birlikte, modern tarayıcı desteği kusursuzdur ve yeni sözde seçiciler, üretim ortamlarında yaygın olarak kullanılmaktadır. Daha eski bir tarayıcı desteğine ihtiyacınız varsa, ya IE için çoklu doldurma ya da bu seçicileri, tavsiye edilen aşamalı geliştirme gibi kritik olmayan şekillerde kullanın.