counter-increment Özelliği

counter-increment özelliği, paragraf veya başlıklar gibi öğelerin otomatik olarak numaralandırılmasını sağlar. counter-reset özelliği, after ve before sözde öğeleri ve içinde counter fonksiyonunun kullanıldığı content özelliği ile birlikte kullanılır. Daha iyi anlamak için örnekleri incelemenizi öneririm.

Sözdizimi

seçici {
	counter-increment: isim [adım] | none;
}

Değerler

Değer	Açıklama
isim	Sayaçın adı. Sıradan bir kelime (sınıf veya id adı gibi). Birden fazla isim boşlukla ayrılarak belirtilebilir. Bu durumda aynı anda birden fazla sayaç değiştirilir.
adım	Pozitif veya negatif tam sayı. İsteğe bağlı parametre.
`none`	Mevcut seçici için sayaç artışını engeller.

Varsayılan değer: none.

Örnek

Paragrafların otomatik olarak numaralandırılmasını sağlayalım:

<div id="parent">
	<p>metin</p>
	<p>metin</p>
	<p>metin</p>
	<p>metin</p>
	<p>metin</p>
</div>

#parent {
	counter-reset: test;
}
#parent p::before {
	counter-increment: test;
	content: counter(test);
}

Örnek

Numaralandırmanın yanı sıra başka bir metin eklenmesine izin verelim. Bizim durumumuzda rakamdan önce № ve sonrasında nokta:

<div id="parent">
	<p>metin</p>
	<p>metin</p>
	<p>metin</p>
	<p>metin</p>
	<p>metin</p>
</div>

#parent {
	counter-reset: test;
}
#parent p::before {
	counter-increment: test;
	content: "№" counter(test) ".";
}

Örnek

Numaralandırmayı 10'dan başlatalım. Bunun için sayacın başlangıç değerini, ihtiyacımız olandan 1 eksik olan dokuza ayarlayalım:

<div id="parent">
	<p>metin</p>
	<p>metin</p>
	<p>metin</p>
	<p>metin</p>
	<p>metin</p>
</div>

#parent {
	counter-reset: test 9;
}
#parent p::before {
	counter-increment: test;
	content: "№" counter(test) ".";
}

Örnek

Şimdi numaralandırmanın "2" adımında olmasına izin verelim. Bunun için adım olarak iki koyuyoruz:

<div id="parent">
	<p>metin</p>
	<p>metin</p>
	<p>metin</p>
	<p>metin</p>
	<p>metin</p>
</div>

#parent {
	counter-reset: test;
}
#parent p::before {
	counter-increment: test 2; /* iki koyuyoruz */
	content: "№" counter(test) ".";
}

Örnek

Önceki örnekte numaralandırma iki ile başladı, ama biz bir ile başlamasını istiyorduk. Neden böyle oldu? Çünkü counter-reset sayaç değerini sıfırlar, ardından counter-increment kendi adımını ekler: varsayılan olarak bir, bu yüzden önceden numaralandırma 1 ile başlıyordu. Şimdi ise iki ekleniyor - ve numaralandırma iki ile başlıyor.

Sorunu düzeltmek için sayacın başlangıç değerini -1 olarak ayarlayalım ve şimdi numaralandırma 1 ile başlayacak ve 2 artacak:

<div id="parent">
	<p>metin</p>
	<p>metin</p>
	<p>metin</p>
	<p>metin</p>
	<p>metin</p>
</div>

#parent {
	counter-reset: test -1;
}
p::before {
	counter-increment: test 2;
	content: "№" counter(test) ".";
}

Ayrıca Bakınız

sayaç değerini sıfırlayan counter-reset özelliği