counter-increment

Wartości

• step – zwiększa licznik step o 1.
• step 2 – o 2; step -1 – zmniejsza o 1.
• step point – zwiększa dwa liczniki.
• none – niczego nie zwiększa (wyłącza zwiększanie z innej reguły).

Wartość początkowa: none. Dziedziczona: nie. Dotyczy: wszystkich elementów.

Przykłady

Instrukcja z numerowanymi krokami zamiast punktorów:

<ol class="steps">
  <li>Otwórz ustawienia.</li>
  <li>Wybierz język.</li>
  <li>Zapisz zmiany.</li>
</ol>

.steps {
  list-style: none;
  padding: 0;
  counter-reset: step;
}
.steps li { counter-increment: step; }
.steps li::before {
  content: "Krok " counter(step) ": ";
  font-weight: bold;
}

Wynik: „Krok 1: Otwórz ustawienia.”, „Krok 2: Wybierz język.”, „Krok 3: Zapisz zmiany.”

Liczba zaznaczonych pól bez JavaScriptu – licznik zwiększają tylko zaznaczone pola, a podsumowanie stoi w HTML za nimi:

<form class="choice">
  <label><input type="checkbox" checked> Kawa</label>
  <label><input type="checkbox"> Herbata</label>
  <label><input type="checkbox" checked> Woda</label>
  <p class="summary">Wybrano: </p>
</form>

.choice { counter-reset: selected; }
.choice input:checked { counter-increment: selected; }
.summary::after { content: counter(selected); }

Wynik: „Wybrano: 2”. Po zaznaczeniu kolejnego pola liczba sama zmieni się na 3.

Na co uważać

• Element z display: none nie zwiększa licznika, element z visibility: hidden tak.
• Dwie deklaracje counter-increment się nie sumują: h3 { counter-increment: a } i h3.x { counter-increment: b } przy h3.x zwiększają tylko b. Kilka liczników należy do jednej deklaracji.
• Bez counter-reset na wspólnym przodku pierwsze zwiększenie samo tworzy licznik – elementy w różnych rodzicach (np. nagłówki w różnych elementach section) mają wtedy każdy własny licznik i wszystkie pokazują 1.

Obsługa w przeglądarkach

Baseline – szeroko dostępne: działa we wszystkich popularnych przeglądarkach, i to od dawna (najpóźniej od 2015 roku). Od wersji: Chrome 2, Firefox 1, Safari 3. Stan: październik 2026 (MDN browser-compat-data).

Zobacz też:
counter-reset
counter() i counters()
content
:checked
::before i ::after