CSS Sayacı

Pizz

Hamburger

Sosis

CSS sayıcıları, CSS tarafından tutulan "değişkenler"dir. Değişken değerleri, CSS kuralları ile artırılabilir (kullanım sayısını takip edebilir).

Sayıcı, belgedeki içerik konumuna göre görünümünü ayarlamanıza olanak tanır.

Sayıcı içeren otomatik numaralandırma

CSS sayıcıları, "değişkenler" gibi çalışır. Değişken değerleri, CSS kuralları ile artırılabilir (kullanım sayısını takip edebilir).

CSS sayıcıları kullanmak için aşağıdaki özellikleri kullanacağız:

  • counter-reset - Sayıcıyı oluşturur veya sıfırlar
  • counter-increment - Sayıcı değeri artırır
  • content - Oluşturulan içeriği ekler
  • counter() veya counters() fonksiyon - sayıcı değerini ögeye ekler

CSS sayıcıları kullanmak için önce counter-reset Oluşturun.

Aşağıdaki örnek, sayfa (body seçicisinde) için bir sayıcı oluşturur, ardından her <h2> ögesine sayıcı değeri ekler ve her <h2> ögesinin başına "Bölüm <sayıcı değeri>": ekler:

örnek

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

Kişisel olarak deneyin

Düzyata sayıcılar

Aşağıdaki örnek, sayfa (section) için bir sayıcı oluşturur, her <h1> ögesi (subsection) için bir sayıcı oluşturur.

"section" sayıcı, her <h1> ögesi için sayar, "Bölüm" ve section sayıcı değerini yazdırır, "subsection" sayıcı, her <h2> ögesi için sayar, section sayıcı değerini ve subsection sayıcı değerini yazdırır:

örnek

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

Kişisel olarak deneyin

Sözdizimi sayıcılar, özet listeleri oluştururken de çok faydalıdır, çünkü alt öğelerde otomatik olarak yeni bir sayıcı örneği oluşturulur. Burada, aşağıdaki şekilde kullanıyoruz counters() fonksiyon, farklı seviyelerdeki içe çıkan sayıcılar arasında bir dizi ekler:

örnek

ol {
  counter-reset: section;
  list-style-type: none;
}
li::before {
  counter-increment: section;
  content: counters(section,".") " ";
}

Kişisel olarak deneyin

CSS Sayacı Özellikleri

Özellik Açıklama
content ::before ve ::after sahte elementleri ile birlikte kullanarak oluşturulan içeriği eklemek için.
counter-increment Bir veya daha fazla sayacı artırın.
counter-reset Bir veya daha fazla sayacı oluştur veya sıfırlayın.