Sayaçlar ve liste stilleri

Birçok içerik türü en iyi şekilde HTML listesi olarak gösterilir. Sıralı liste içeriklerinde (ör. tarif adımları veya makale dipnotları) işaretçi genellikle bilgi de içerir. CSS, listedeki sayaçları kontrol etmenin çeşitli yollarını sunar.

Liste stilleri

Sayıları, alfabetik sıralamayı, Roma rakamlarını ve birçok uluslararası sayma sistemini destekleyen çok çeşitli önceden tanımlanmış liste stili türleri vardır.

Tarayıcılar tarafından desteklenen stillere ek olarak W3C, 45 yazı sisteminde 181 ek stilin desteklendiği Hazır Sayaç Stilleri'ni yayınladı.

Bu seçenekler ihtiyaçlarınızı karşılamıyorsa özel bir @counter-style de tanımlayabilirsiniz. Bu sayede özel semboller, önek ve sonek belirleyebilir ve daha fazlasını yapabilirsiniz.

Varsayılan olarak öğe işaretçisi outside listedir, listenin önüne yerleştirilir ve sağa hizalanır. Ayrıca, list-style-position: inside ile öğe işaretçisini listenin içine de yerleştirebilirsiniz.

Sayaçlar

Liste stilleri, liste öğesi işaretlerinin nasıl görüntüleneceğini kontrol ederken sayaçlar, görüntülenecek değerleri kontrol etmenize olanak tanır. <li> liste öğesi öğeleri için tarayıcı, karşılaşılan her liste öğesi için 1 artırılan list-item adlı bir sayaç oluşturur.

CSS sayaçları, karşılık gelen bir counter-increment değeri ayarlanmış bir öğenin kaç kez oluşturulduğunun sayısını tutar.

Yeni bir sayaç oluşturmak için sayaç adıyla birlikte counter-reset kullanın. İsteğe bağlı olarak başlangıç değeri de belirtebilirsiniz. Bu özelliği genellikle sayılacak tüm öğeleri içeren bir üst öğede ayarlarsınız.

Ardından, saymak istediğiniz her öğeye bir counter-increment özelliği ekleyin.

Son olarak, counter() işlevini kullanarak sayaç değerini görüntüleyin.

Bu örnekte, her dipnot için bağlantı metni olarak dipnotların toplam sayısını göstermek istiyoruz. Belgenin tamamı için tek bir sayaç istediğimizden counter-reset: note öğesini gövdeye yerleştiririz ve her dipnot bağlantısında artırırız.

Ayrıca, farklı öğeleri sayan birden fazla sayaç da kullanabilirsiniz. Dipnotlar örneğinde, dipnotun bulunduğu bölümün ve paragrafın dizinini göstermek istediğinizi varsayalım.

Bölüm sayısı, gövde üzerinde counter-reset kullanılarak oluşturulabilir ve ardından her <h2> öğesinde artırılabilir. Paragraf sayısının her bölüm için sıfırlanmasını istiyoruz. Bu nedenle, <h2> öğelerinde counter-reset işlevini kullanıp <p> öğelerinde artırma işlemi yapacağız.

Son olarak, content özelliğindeki sayaç değerlerini birleştiririz.

a:after {
  content: "(S" counter(section) "P" counter(paragraph) "N" counter(note) ")";
  font-size: small;
  vertical-align: super;
}

İç içe yerleştirilmiş sayaçlar

Bir listenin içine liste yerleştirdiğinizde ne olur? list-item sayacı her <ul> veya <ol> öğesi için başlatılır ve counter() yalnızca en içteki sayının sayısını döndürür. İç içe sayaçların her birindeki sayıyı göstermek istiyorsanız sayaç adı ve ayırıcı alan counters() işlevini kullanın.

li::marker {
  content: counters(list-item, ".")
  }

Sayaçları tersine çevirme

Varsayılan olarak sayaçlar (<ol> öğeleri için örtülü list-item sayacı dahil) 0'dan başlar ve her öğe için bir artar. Yani ilk öğe 1 olarak sayılır. 1'e kadar geriye saymak isterseniz ne yapmanız gerekir?

Bunu yapmak için reversed özelliğini <ol> öğesine ekleyin. Standart liste stilini kullanıyorsanız işaretçiler beklendiği gibi çalışır. Ancak özel bir sayaç kullanıyorsanız counter-increment değerini negatif bir değere ayarlamanız ve sayacın başlangıç değerini manuel olarak hesaplamanız gerekir.

Bilgilerinizi sınayın