Własność CSS counter-reset

Własność CSS counter-reset tworzy licznik o określonej nazwie i opcjonalnie podanej wartości początkowej. Jeśli wartość początkowa nie zostanie podana, zostaje użyta wartość domyślna 0.

Wartości i składnia własności CSS counter-reset

Własność counter-reset jako wartość przyjmuje rozdzielaną spacjami listę nazw tworzonych liczników z opcjonalnymi wartościami początkowymi w postaci liczby całkowitej, lub słowo kluczowe none (oznaczające brak licznika), np.:

counter-reset: licznik 1 inny-licznik 3 kolejny-licznik;

Ta deklaracja tworzy trzy liczniki: licznik o wartości początkowej 1, inny-licznik o wartości początkowej 3px oraz kolejny-licznik o domyślnej wartości początkowej 0.

Własność tę można przypisać do elementu nadrzędnego wobec wszystkich elementów listy, czyli np. ol. Aby tak utworzony licznik stał się użyteczny, dodatkowo należy dodać go do pseudoelementu ::marker, ::before lub ::after (zobacz ::marker czy ::before na stronie Stylizacja list i liczników CSS) elementów listy za pomocą własności content oraz określić sposób inkrementacji wartości za pomocą własności counter-increment. Poniżej znajduje się kompletny przykład definicji licznika za pomocą własności counter-reset.

ol {
  counter-reset: licznik;
}
li {
  margin-bottom: 10px;
  margin-top: 10px;
  counter-increment: licznik 1;
}

li::marker {
  content: counter(licznik) ". ";
}

Kod HTML:

<ol>
  <li>Raz</li>
  <li>Dwa</li>
  <li>Trzy</li>
  <li>Cztery</li>
  <li>Pięć</li>
  <li>Sześć</li>
</ol>

Efekt:

Liczniki odwrotne

Za pomocą własności counter-reset można także tworzyć liczniki odwrotne, tzn. odliczające wstecz. Służy do tego specjalna składnia funkcyjna reversed(nazwa-licznika), np.:

counter-reset: reversed(odwrotny-licznik);

Ta deklaracja tworzy licznik odliczający wstecz. Aby działał prawidłowo, za pomocą własności counter-increment należy mu przypisać ujemną wartość inkrementacji, np. -1, -4 itd.

Wbudowany licznik elementów listy list-item

Każda lista HTML ma wbudowany licznik list-item, którego wartość jest automatycznie zmieniana o jeden. Do tego licznika można się odwoływać za pomocą własności counter-reset, aby ustawić go według własnej potrzeby na inną wartość niż domyślna, np.:

counter-reset: list-item 3;

Ta deklaracja spowoduje ustawienie wbudowanego licznika elementów listy na wartość 3.

Podsumowanie