Atrybut counter-reset w CSS

Definicja i użycie

Właściwość counter-reset ustawia wartość licznika liczby wystąpień danego selektora. Domyślnie wynosi 0.

Używając tej właściwości, licznik można ustawić lub zresetować do jakiejkolwiek wartości, zarówno dodatniej, jak i ujemnej. Jeśli nie podano liczby, wartość domyślna wynosi 0.

Uwaga:Jeśli użyto "display: none", nie można zresetować licznika. Jeśli użyto "visibility: hidden", można zresetować licznik.

Zobacz również:

Podręcznik CSS:Pseudoelement :before w CSS

Podręcznik CSS:Pseudoelement :after w CSS

Podręcznik CSS:content

Podręcznik CSS:Atrybut counter-increment

Funkcja CSS:Funkcja counter()

Podręcznik HTML DOM:Atrybut counterReset

Przykład

Metoda numerowania części i podrozdziałów (np. "Rozdział 1", "1.1", "1.2"):

body
  {
  counter-reset:section;
  }
h1
  {
  counter-reset:subsection;
  }
h1:before
  {
  content:"Section " counter(section) ". ";
  counter-increment:section;
  }
h2:before
  {
  counter-increment:subsection;
  content:counter(section) "." counter(subsection) ";
  }

Spróbuj sam

CSS syntaxa

counter-reset: none|name liczba|initial|dziedziczony;

Wartość atrybutu

Wartość Opis
brak Domyślnie. Nie można zresetować licznika dla selektora.
id liczba

id Definiuje selektor, id lub klasę do zresetowania licznika.

liczba Wartość licznika, który można ustawić dla tego selektora. Może to być liczba całkowita, zero lub liczba ujemna.
dziedziczony Definiuje wartość atrybutu counter-reset, który powinien być dziedziczony z elementu nadrzędnego.

Techniczne szczegóły

Domyślna wartość: brak
Inheredność: nie
Wersja: CSS2
JavaScript syntaxa: obiekt.style.counterReset="subsection"

Wsparcie przeglądarki

Liczby w tabeli wskazują na pierwszą wersję przeglądarki, która w pełni obsługuje tę właściwość.

Chrome IE / Edge Firefox Safari Opera
4.0 8.0 2.0 3.1 9.6

Uwaga:Jeśli zdefiniowano !DOCTYPE, to Internet Explorer 8 (i wyższe wersje) obsługuje atrybut counter-reset.