Contador do CSS

Pizza

Hamburger

Hotdogs

Os contadores CSS são "variáveis" mantidas pelo CSS, cujo valor pode ser incrementado pelas regras CSS (para rastrear o número de vezes que é usado).

Os contadores permitem ajustar a aparência com base na posição do conteúdo no documento.

Numeração automática com contadores

Os contadores CSS são como "variáveis".. O valor da variável pode ser incrementado pelas regras CSS (rastreado pelo número de vezes que é usado).

Para usar contadores CSS, usaremos os seguintes atributos:

  • counter-reset - cria ou redefine o contador
  • counter-increment - incrementa o valor do contador
  • content - insere o conteúdo gerado
  • counter() ou counters() função - adiciona o valor do contador ao elemento

Para usar contadores CSS, é necessário primeiro usar counter-reset Crie-o.

O exemplo a seguir cria um contador para a página (no seletor body) e incrementa o valor do contador para cada <h2> elemento, adicionando "Seção <valor do contador>:" no início de cada <h2> elemento:

Exemplo

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

Experimente você mesmo

Contadores aninhados

O exemplo a seguir cria um contador para a página (seção) e cria um contador para cada <h1> elemento (subsection).

"section" o contador conta para cada <h1> elemento, escrevendo "Seção" e o valor do contador de seção, "subsection" o contador conta para cada <h2> elemento, escrevendo o valor do contador de seção e o valor do contador de subsection:

Exemplo

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

Experimente você mesmo

Os contadores também são úteis para criar listas de resumo, pois um novo exemplo de contador é criado automaticamente nos elementos filhos. Aqui, usamos counters() A função insere uma string entre os contadores de nível diferente:

Exemplo

ol {
  counter-reset: section;
  list-style-type: none;
}
li::before {
  counter-increment: section;
  content: counters(section,".") " ";
}

Experimente você mesmo

Propriedade de contador CSS

Propriedade Descrição
content Use juntamente com os elementos pseudo ::before e ::after para inserir conteúdo gerado.
counter-increment Aumente um ou mais valores de contadores.
counter-reset Crie ou redefina um ou mais contadores.