CSS counter() fonksiyonu

Tanım ve kullanım

counter() Belirtilen sayacının mevcut değerini döndüren fonksiyon.

Örnek

Örnek 1

Sayfa için sayacı oluşturun (body seçicisinde). Her <h2> elementine sayacı değeri ekleyin ve her <h2> elementi önüne "Bölüm X" metnini ekleyin:

body {
  counter-reset: section;
}
h2::before {
  counter-increment: section;
  content: "Bölüm " counter(section) ": ";
}

Kişisel olarak deneyin

Örnek 2

Sayacı tarzı ayarlayın:

body {
  counter-reset: section;
}
h2::before {
  counter-increment: section;
  content: "Bölüm " counter(section, upper-roman) ": ";
}

Kişisel olarak deneyin

CSS dilbilgisi

counter(countername, counterstyle)
Değer Açıklama
countername

Gerekli. Sayacın adı (counter-reset ve counter-increment özelliklerinde kullanılan adla aynı).

Dikkat, isimler büyük/küçük harfe duyarlıdır.

counterstyle

İsteğe bağlı. Sayacı tarzı (list-style-type değerleri, @counter-style adı veya symbols() fonksiyonu olabilir).

Varsayılan değeri ondalıkdır.

Teknik ayrıntılar

Sürüm: CSS3

Tarayıcı destekler

Chrome Edge Firefox Safari Opera
Destek Destek Destek Destek Destek

İlgili sayfalar

Eğitim:CSS Sayacı

Referans:CSS içerik özelliği

Referans:CSS sayacı artırma özelliği

Referans:CSS sayacı sıfırlama özelliği

Referans:CSS @counter-style kuralı

Referans:CSS counters() fonksiyonu