Kullanımı: Tablo ile-tipi (n)
Tabloları daha kolay okunur hale getirmek için sıralı arka plan renkleri ile satırları sıralamak yararlı olur. Tabloları şekillendirmenin en yaygın yollarından biri, diğer satırların arka plan rengini ayarlamaktır. Bu genellikle "zebra çizgileri" olarak adlandırılır.
Bunu, diğer her satırı bir CSS sınıfı ile ayarlayıp ardından bu sınıfın stilini tanımlayarak yapabilirsiniz. Bu çalışır ama bununla ilgili en iyi veya en verimli yol değildir.
Bu yöntemi kullanırken, bu tabloyu düzenlemeniz gereken her zaman, her satırın değişikliklerle tutarlı olmasını sağlamak için tablodaki her bir satırı düzenlemeniz gerekebilir. Örneğin, tablonuza yeni bir satır eklerseniz, bunun altındaki her satırın, sınıfın değişmesi gerekir.
CSS , zebra çizgili stil tablolarını kolaylaştırır. Ekstra HTML nitelikleri veya CSS sınıfları eklemenize gerek yoktur, sadece aşağıdakileri kullanın: nth-tipi (n) CSS seçicisi .
Tip: n (n) seçici, CSS'de ana ve kardeş öğelerle olan ilişkilerine göre öğeleri şekillendirmenize izin veren yapısal bir sözde sınıftır. Kaynak siparişine göre bir veya daha fazla öğe seçmek için kullanabilirsiniz. Başka bir deyişle, ebeveyninin belirli bir türünün nth çocuğu olan her öğeyle eşleşebilir.
N harfi bir anahtar kelime (tek veya çift), bir sayı veya formül olabilir.
Örneğin, diğer paragraf etiketlerini sarı arka plan rengiyle şekillendirmek için CSS belgeniz şunları içerir:
p:-tipi (tek) {
arkaplan: sarı;
}
HTML Tablonuzla Başlayın
Öncelikle, tablonuzu normalde HTML’de yazdığınız şekilde oluşturun. Satırlara veya sütunlara özel sınıflar eklemeyin.
Stil sayfanızda, aşağıdaki CSS’yi ekleyin:
tr:-tipi (tek) {
Arka plan renkli: #ccc;
}
Bu, her satırın ilk satırla başlayarak gri arka plan rengiyle şekillendirir.
Aynı Şekilde Stil Değiştirme Sütunları
Tablolarınızdaki sütunlara aynı tarz stilleri uygulayabilirsiniz. Bunu yapmak için, CSS sınıfınızdaki tr'i td olarak değiştirin. Örneğin:
td: türden (tek sayı) {
Arka plan renkli: #ccc;
}
Formül (n) Seçici'de Formülleri Kullanma
Seçicide kullanılan formülün sözdizimi bir + b'dir.
a, döngü veya dizin boyutunu temsil eden bir sayıdır.
n aslında "n" harfidir ve 0'da yıldız olan bir sayacı temsil eder.
+, "-" olabilen bir operatördür
b bir tamsayıdır ve ofset değerini gösterir - örneğin, seçicinin arka plan rengini uygulamaya başlaması gereken kaç satır olmalıdır. Bu, bir operatör formülüne dahil edilmişse gereklidir.
Örneğin, her 3. satır için bir arka plan rengi ayarlamak isterseniz, formülünüz 3n + 0 olur. CSS’niz şöyle görünebilir:
tr:-tipi (3n + 0) {
arkaplan: slategray;
}
Tip Seçici Kullanımı için Yararlı Araçlar
Pseudo-class-türü seçiciyi kullanmanın formül yönüne göre biraz dahşet duyuyorsanız, aşağıdakileri deneyin: nth Tester sitesini istediğiniz görünüme ulaşmak için sözdizimini tanımlamanıza yardımcı olabilecek kullanışlı bir araç olarak deneyin. -Tipi seçmek için açılır menüyü kullanın (burada ayrıca nth-child gibi diğer sözde sınıfları deneyebilirsiniz).