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/ya 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 ve counter-increment 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 headings 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 ve HTML Dog > CSS Property: counter-reset oldukça iş görecektir.