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ünde konumlandırılır 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. Tarayıcı, <li> liste öğesi öğeleri için list-item adlı bir sayaç oluşturur. Bu sayaç, karşılaşılan her liste öğesi için 1 artırılır.
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 komutunu ve isteğe bağlı olarak bir başlangıç değeri kullanın. 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österin.
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ı, counter-reset kullanılarak gövdede 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, <p> öğelerinde ise 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ı geri alma
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?
alski bunu yapmak için <ol> reversed özelliğini ekleyin. Standart liste stilini kullanıyorsanız işaretçiler beklendiği gibi çalışır. Ancak özel 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.