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-reset1 ve counter-increment2 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-reset4 ve HTML Dog > CSS Property > counter-reset5 oldukça iş görecektir.