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

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

Değerler

Varsayılan değer: none.

Örnek

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

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

css#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:

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

css#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:

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

css#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:

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

css#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:

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

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

Результат:

Ayrıca Bakınız