: n'inci tür - CSS Hileleri

:nth-of-typeSeçici bir formüle göre, onların kaynak sırasına göre bir veya daha fazla öğeleri seçin sağlar. CSS Seçiciler Seviye 3 spesifikasyonunda bir "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.

Sırasız bir listemiz olduğunu ve alternatif liste öğelerini "zebra çizmek" istediğimizi varsayalım:

First Item
Second Item
Third Item
Fourth Item
Fifth Item

Her bir liste öğesine sınıflar eklemek yerine (örneğin .even& .odd) kullanabiliriz :nth-of-type:

li ( background: slategrey; ) /* select alternating items starting with the second item */ li:nth-of-type(2n) ( background: lightslategrey; )

Gördüğünüz gibi, :nth-of-typebir argüman alıyor: bu tek bir tam sayı, "çift" veya "tek" anahtar kelimeleri veya yukarıda gösterildiği gibi bir formül olabilir. Bir tamsayı belirtilirse, yalnızca bir öğe seçilir, ancak anahtar kelimeler veya bir formül, ana öğenin tüm alt öğelerini yineler ve JavaScript'teki bir dizideki öğelerde gezinmeye benzer şekilde eşleşen öğeleri seçer. "Çift" ve "tek" anahtar sözcükleri basittir, ancak 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, 2nişe yarayan formülle her ikinci öğeyi seçtik, çünkü bir öğe her kontrol edildiğinde, "n" bir arttı (2 × 0, 2 × 1, 2 × 2, 2 × 3, vb.). Bir elemanın sırası denklemin sonucuyla eşleşirse, seçilir (2, 4, 6, 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-of-typeseçicilere bazı örnekler verilmiştir :

Bu Kaleme bakın!

Neyse ki, matematiği her zaman kendiniz yapmak zorunda değilsiniz - orada birkaç :nth-of-typetest edici ve üretici var:

• CSS Hileleri Test Cihazı
• Lea Verou'nun Testçisi

İlgi noktaları

• :nth-of-typekaynak sırasının en üstünden başlayarak öğeleri yineler. :nth-last-of-typeOnunla arasındaki tek fark , ikincisinin kaynak sırasının en altından başlayarak öğeler arasında yinelenmesidir.
• :nth-of-typeSelektör çok benzer :nth-childama bir ile kritik fark: daha özeldir. Yukarıdaki örneğimizde li, 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-of-type-it'in gücünü ortaya çıkarır, tüm kardeşlerle değil, benzer kardeşlerle ilişkili bir düzenlemede belirli bir öğe türünü hedefler.

Tarayıcı Desteği

Krom	Safari	Firefox	Opera	IE	Android	iOS
İşler	3.2+	İşler	9.5+	9+	İşler	İşler

:nth-of-typeCSS 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.