CSS sayacı artırma özelliği

Tanım ve Kullanım

counter-increment özelliği belirli bir seçicinin her çıkışında sayıcı artış miktarını ayarlar. Varsayılan artış miktarı 1'dir.

Açıklama

Bu özelliği kullanarak, sayıcı belirli bir değeri artırabilir (veya azaltabilir), bu değer pozitif veya negatif olabilir. Number değeri sağlanmadıysa, varsayılan olarak 1 olarak ayarlanır.

Açıklama:"display: none" kullanıldığında, sayım artırılamaz. "visibility: hidden" kullanıldığında, sayım artırılabilir.

Ayrıca bkz:

CSS referans el kitabı:CSS :before sahte ögesi

CSS referans el kitabı:CSS :after sahte ögesi

CSS referans el kitabı:content özelliği

CSS referans el kitabı:counter-reset özelliği

CSS fonksiyonu:counter() fonksiyonu

HTML DOM referans el kitabı:counterIncrement özelliği

Örnek

Bölüm ve alt bölümlere numaralandırma yapma (örneğin "Bölüm 1", "1.1", "1.2") yöntemi:

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

Kendi kendine deneyin

CSS dilbilgisi

counter-increment: none|id|initial|inherit;

Özellik değeri

Değer Açıklama
yok Varsayılan. Seçici, sayacı artırmaz.
id number

id Artırılacak sayacı tanımlayan seçici, id veya class'ı tanımlar.

number Artırım miktarını tanımlar. number, pozitif, sıfır veya negatif olabilir.
inherit counter-increment özelliğinin değerini ebeveyn elemanından alması gerektiğini belirtir.

Teknik ayrıntılar

Varsayılan değer: yok
Mirasçılık: hayır
Sürüm: CSS2
JavaScript dilbilgisi: nesne.style.counterIncrement="subsection"

Tarayıcı desteği

Tabloda belirtilen rakamlar, bu özelliği tam olarak destekleyen ilk tarayıcı sürümünü gösterir.

Chrome IE / Edge Firefox Safari Opera
4.0 8.0 2.0 3.1 9.6

Açıklama:Eğer !DOCTYPE tanımlanmışsa, Internet Explorer 8 (ve daha yüksek sürümler) counter-increment özelliğini destekler.