Atributo CSS counter-reset

Definição e uso

A propriedade counter-reset define o valor do contador de ocorrências de um seletor específico. O valor padrão é 0.

Utilizando essa propriedade, o contador pode ser configurado ou redefinido para qualquer valor, positivo ou negativo. Se não for fornecido number, o valor padrão é 0.

Nota:Se usar "display: none", não é possível resetar o contador. Se usar "visibility: hidden", é possível resetar o contador.

Veja também:

Manual de referência CSS:Elemento pseudo :before do CSS

Manual de referência CSS:Elemento pseudo :after do CSS

Manual de referência CSS:Propriedade content

Manual de referência CSS:Propriedade counter-increment

Função CSS:Função counter()

Manual de referência do HTML DOM:Propriedade counterReset

Exemplo

Método para numerar partes e subpartes (por exemplo, "Seção 1", "1.1", "1.2"):

body
  {
  counter-reset:section;
  }
h1
  {
  counter-reset:subsection;
  }
h1:before
  {
  content:"Seção " counter(section) ". ";
  counter-increment:section;
  }
h2:before
  {
  counter-increment:subsection;
  content:counter(section) "." counter(subsection) ";
  }

Experimente você mesmo

Sintaxe CSS

counter-reset: none|Nome number|initial|inherit;

Valor do atributo

Valor Descrição
none Padrão. Não é possível resetar o contador do seletor.
id number

id Define o seletor, id ou classe para resetar o contador.

number O valor do contador que pode ser configurado para este seletor. Pode ser um número positivo, zero ou negativo.
inherit A propriedade counter-reset deve ser herdada do elemento pai.

Detalhes técnicos

Valor padrão: none
Herança: no
Versão: CSS2
Sintaxe JavaScript: object.style.counterReset="subsection"

Suporte do navegador

Os números na tabela indicam a primeira versão do navegador que suporta plenamente essa propriedade.

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

Nota:Se !DOCTYPE já foi especificado, o Internet Explorer 8 (e versões mais recentes) suporta a propriedade counter-reset.