CSS İle List / Sublist Sayaç (Counter)
Counter, Counter-reset ve Counter-increment
CSS içerisinde kullanabileceğimiz counter-reset bize elementler için otomatik numaralandırma imkanı sunmakta. Bu yazıda, yakın zamanda ihtiyaç duyduğum bir kullanımdan bahsedeceğim.
counter-reset Kullanımı
Özellikle içeriklerde referanslar oluşturduğumda ilgili içerik için ayrıca el yordamı ile numaralandırma yapmak istemediğim, başlıklarla listenin bölünmesi durumunda tekrar numaralandırmanın baştan başlaması sonucu counter
yapısını detaylıca incelemek durumunda kaldım. Sonuç olarak counter-reset
ve bölünen listeler uyarınca da harici seçimlerle (ya da start
belirleyerek) çözüm üretmiş oldum. Alternatif ve/veya var olan yapının daha efektif kullanımı için jQuery
ile listeler seçilip alt listeler sayılarak listeler arasında sıralamalar düzenlenebilir elbette.
ol { counter-reset: mynum; list-style-type: none; }
ol li::before {
content: counter(mynum) ". ";
counter-increment: mynum;
}
Temel olarak ihtiyaç duyduğum çözüm için counter-reset
1 ve counter-increment
2 sayesinde gerçekleştirilebilmekte. Ek olarak counter-increment
ile sayım işlemini numeric
olarak (0-9) sürdürmek zorunda değilsiniz. Aşağıda çözüm olarak kullandığım kodu paylaşıyorum.
Yukarıdaki açıklama ve örneklere ek olarak Francis Cook’un paylaşdığı Numbered headings3 in CSS başlıklı yazıya da göz atabilirsiniz. counter-reset
kullanımına dair daha detaylı örnekler için ise MDN Web Docs > counter-reset
4 ve HTML Dog > CSS Property > counter-reset
5 oldukça iş görecektir.