|

Usando a função counter() do CSS

Usando a função counter() do CSS Foto por em Unsplash

Como usar a função counter() do CSS

Contadores CSS permitem que você automaticamente mostre a quantidade de elementos específicos em uma página. Você pode usá-los para contar automaticamente o número de itens em uma lista, por exemplo. 📝

Contadores são essencialmente variáveis mantidas pelo CSS, que podem ser incrementadas ou reduzidas utilizando regras de estilo como qualquer outra.


Utilizando contadores

A primeira coisa que você deve fazer é iniciar o contador em um seletor com a propriedade counter-reset.

Em seguida, o valor pode ser incrementado ou reduzido utilizando a propriedade counter-increment.

O valor atual de um contador pode ser mostrado utilizando as funcões counter() ou counters(), geralmente com o auxílio de um pseudo-elemento content.

div {
  counter-reset: mycounter; 
}

Uma vez inicializado, o valor do contador pode ser aumentado ou reduzido usando o counter-increment. Com a declaração seguinte, a variável counter mycounter será incrementada uma vez para cada elemento do tipo p.

p::before {
  counter-increment: mycounter;
}

Mostrando o contador

Agora para utilizarmos o contador da maneira em que definimos anteriormente, utilizaremos a função counter() dentro da propriedade content.

p::before {
  counter-increment: mycounter;
  content: "#" counter(mycounter) ": ";
}

E então, com a estrutura seguinte em HTML:

<div>
  <p>Olá!</p>
  <p>Como você está?</p>
  <p>Ótimo, obrigado!</p>
</div>

Obteremos o seguinte resultado:

Olá!

Como você está?

Ótimo, obrigado!


Contadores aninhados

O contador CSS pode também numerar listas com multiplos níveis. Criaremos aqui um exemplo de uma lista ordenada em que cada item-pai pode ou não possuir itens-filhos. Utilizaremos a seguinte estrutura em HTML:

<section>
  <ol>
    <li>item</li>
    <li>
      item
      <ol>
        <li>item</li>
        <li>item</li>
        <li>item</li>  
      </ol>
    </li>
    <li>
      item
      <ol>
        <li>item</li>
      </ol>
    </li>
    <li>
      item
      <ol>
        <li>item
          <ol>
            <li>item</li>
            <li>item</li>
          </ol>
        </li>
        <li>item</li>
      </ol>
    </li>
    <li>item</li>
  </ol>
</section>

Como elementos do tipo ol já possuem geralmente uma pré-ordenação definida, precisamos incluir em nosso CSS o seguinte:

ol {
  list-style-type: none;
}

E em relação aos contadores, adicionaremos:

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

Isso resultará em:

  1. item
  2. item
    1. item
    2. item
    3. item
  3. item
    1. item
  4. item
    1. item
      1. item
      2. item
    2. item
  5. item

Espero que este artigo possa ajudá-lo a implementar contadores CSS em seus projetos. Caso você tenha sugestões ou dúvidas, não hesite em fazer contato. Até mais! 👋