Atributo counter-set do CSS

Definição e uso

counter-set A propriedade é usada para criar e definir um contador CSS para um valor específico.

counter-set As propriedades são geralmente usadas juntamente com as propriedades counter-increment e content.

Exemplo

Exemplo 1

Criar um contador ("my-counter"), defini-lo como 5 e incrementá-lo 1 vez a cada aparição do seletor <h2>:

body {
  /* Definir "my-counter" como 5 */
  counter-set: my-counter 5;
}
h2::before {
  /* Adiciona 1 ao "my-counter" */
  counter-increment: my-counter;
  content: "Section " counter(my-counter) ". ";
}

Experimente você mesmo

Exemplo 2

Criar um contador ("my-counter"), defini-lo como 5 e decrementá-lo 1 vez a cada aparição do seletor <h2>:

body {
  /* Definir "my-counter" como 5 */
  counter-set: my-counter 5;
}
h2::before {
  /* Diminuir "my-counter" em 1 */
  counter-increment: my-counter -1;
  content: "Section " counter(my-counter) ". ";
}

Experimente você mesmo

Exemplo 3

Usar formatos como "Section 10:"、"10.1"、"10.2" para numerar seções e subseções:

body {
  /* Definir "section" como 9 */
  counter-set: section 9;
}
h1 {
  /* Define "subsection" como 0 */
  counter-set: subsection 0;
}
h1::before {
  /* Adiciona 1 ao "section" */
  counter-increment: section;
  content: "Seção " counter(section) ": ";
}
h2::before {
  /* Adiciona 1 ao "subsection" */
  counter-increment: subsection;
  content: counter(section) "." counter(subsection) " ";
}

Experimente você mesmo

Exemplo 4

Crie um contador, configure-o como 9 e aumente 1 em cada ocorrência do seletor <h2> (usando números romanos):

body {
  /* Define "my-counter" como 9 */
  counter-set: my-counter 9;
}
h2::before {
  /* Adiciona 1 ao "my-counter" */
  counter-increment: my-counter;
  content: counter(my-counter, upper-roman) ". ";
}

Experimente você mesmo

Sintaxe do CSS

counter-set: none|counter-name number|initial|inherit;

Valor do atributo

Valor Descrição
none Valor padrão. Não configurar o contador.
counter-name number

O nome do contador a ser configurado e seu valor.

A cada ocorrência do seletor, o contador será configurado para esse valor.

O valor padrão é 0.

initial Defina essa propriedade como seu valor padrão. Veja initial.
inherit Herda essa propriedade do elemento pai. Veja inherit.
Valor padrão: none
Herança: Não
Produção de animação: Não suportado. Veja:Propriedades relacionadas a animação.
Versão: CSS2
Sintaxe do JavaScript: object.style.counterSet="4"

Suporte do navegador

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

Chrome Edge Firefox Safari Opera
85 85 68 17.2 71

Páginas relacionadas

Referência:Elemento pseudo ::before

Referência:Elemento pseudo ::after

Referência:Atributo content do CSS

Referência:Atributo counter-increment do CSS

Referência:Função counter() do CSS