10

Recentemente estava estudando CSS e descobri o counter-reset e o counter-increment, só que não entendi ao certo as propriedades e fiquei com algumas dúvidas.

Dúvidas

  1. Para que serve counter-reset e o counter-increment no CSS?
  2. Existe alguma real utilidade para essas propriedades?
  3. São suportadas por muitos navegadores?
  4. Como elas realmente funcionam?
2

2 Respostas 2

7

Existem algumas formas bem interessantes de aplicação para os counter. Uma é numerar páginas, a outra é numerar itens e sub-itens de uma lista por exemplo. Mas vc pode usar para numerar capítulos de um editorial e seus sub-títulos por exemplo... Outra aplicação simples seria para numerar divs, como se elas fossem uma lista ordenada de divs.

Numerando UL e LI

Primeiro veja esse modelo básico para entender o conceito.

Repare que nele eu inicio o counter na UL, e no ::after desse UL eu coloco o resultado dentro do content. Depois disso eu usa o LI para fazer o incremento do valor do counter. Isso significa que eu vou "contar" quantas LI existem no DOM com CSS e plotar esse valor no content da UL.

Agora vc a parte de colocar o número da LI. Para isso vc vai colocar no ::after das LI o mesmo counter(teste), só que como agora ele está em cada LI ele vai mostrar índice do próprio elemento.

inserir a descrição da imagem aqui

Veja o código para entender melhor, deixei os comentários para vc entender melhor.

ul {
    /* inicia o contador aqui */
    counter-reset: teste;
}
ul::after {
    /* vai pegar o que vier do counter-increment das LIs e colocar aqui nesse after */
    content: counter(teste);
    font-weight: bold;
    color: red;
}
li {
    /* vai contar quantas LI tem no DOM dentro dessa UL */
    counter-increment: teste;
}
li::after {
    /* coloca na LI o próprio número que ela tem no index */
    content: " " counter(teste);
    color: green;
}
  <ul>
      <li>item 1</li>
      <li>item 2</li>
      <li>item 3</li>
      <li>item 4</li>
      <li>item 5</li>
  </ul>


Lista Vazando o Escopo

Esse tipo de lista é interessante, pq ela "sangra o escopos" do pai e a ordem da lista é compartilhada. O que quero dizer é que temos aqui 3 OL e mesmo assim a ordem da contagem é compartilhada entre todas as LI como se a OL fosse "ignorada". Isso acontece pq iniciamos o counter no body, e não na OL

Repare que mesmo todas as OL tendo algumas LI dentro, a sequencia alfabética segue como uma coisa só da primeira LI da primeira OL até a última LI da última OL. Por exemplo, o segundo grupo de LIs dentro da segunda OL começa na letra D e não na letra A

OBS: Eu usei OL e LI, mas poderiam ser DIVs e Ps tranquilamente (mas não semanticamente)

body {
  background: #333;
  counter-reset: mega-step mini-step;
}
ol {
  padding: 0;
}
ol li{
  counter-increment: mini-step;
  list-style:none;
}
ol li:before{
  content:counter(mini-step, lower-alpha) " ";
  background:darkred;
  color:white;
  padding:2px 5px;
  margin: 4px;
  font:14px/250% times new roman;
  border-radius: 100%;
  font-weight: bold;
}

section {
  width: 20%;
  float: left;
  margin: 20px;
  background: white;
  counter-increment: mega-step;
  padding: 5px;
  position: relative;
  
}
section:before {
  content: counter(mega-step, upper-roman);
  background:white;
  width:30px;
  position: absolute;
  left:0px; top:-20px;
  text-align: center;
  color:darkred;
  font: bold 20px times new roman;
}
<section>
  <ol>
    <li>começa no A</li>
    <li>LI 2 da OL 1</li>
    <li>LI 3 da OL 1</li>
  </ol>
</section>

<section>
  <ol>
    <li>Segue com D</li>
    <li>LI 2 da OL 2</li>
    <li>LI 3 da OL 2</li>
  </ol>
</section>

<section>
  <ol>
    <li>LI 1 da OL 3</li>
    <li>LI 2 da OL 3</li>
    <li>Última li de 3 OL = I</li>
  </ol>
</section>

Nesse exemplo eu usei upper-roman para numerar as Sections com números em Romano (I) e lower-alpha para ordenar as Kem ordem alfabética (a). Veja que o segundo argumento do counter é o estilo usado para no contador.

content: counter(mega-step, upper-roman)
content:counter(mini-step, lower-alpha)

DICA: Aqui tem uma lista completa desse Estilos que vc pode usar no counter, são os mesmo usados tradicionalmente nas Listas Ordenadas e Não Ordenadas

https://developer.mozilla.org/en-US/docs/Web/CSS/list-style-type


Veja o exemplo de lista / sub-lista

Primeiro vc tem que "iniciar" o Counter em todos os <ol>, e remover o valor default da Lista Ordenada. Depois no <li> vc faz o incremento do Counter no Content. O legal aqui é que vc tem toda a flexibilidade do CSS para customizar seus números etc. OBS: Deixei os comentário no código do CSS

ol {
    counter-reset: section;  /* inicia um contador com valor 0 nome de "section" */             
    list-style-type: none;   /* remove o valor default da <ol> */ 
}

li::before {
    counter-increment: section; /* inclui o contado "section" com incremento de 1 */          
    content: counters(section, "-") ": ";  /* pega o valor do counter do pai e coloca um "-" depois da um espaço com os ": " e coloca o valor do counter do filho */
    color: red;
    font-size: 20px;
    font-family: sans-serife;
}

.custom-counter {
    margin: 0;
    padding: 0;
}
<div>
    <ol class="custom-counter">
        <li><b>RESUMO DE ATIVIDADES</b>
            <ol class="custom-counter">
                <li><b>SUB ATIVIDADES</b></li>
                <li><b>SUB ATIVIDADES</b></li>
            </ol>
        </li>
        <li><b>COMENTÁRIOS</b>
            <ol class="custom-counter">
                <li><b>SUB COMENTÁRIOS</b></li>
                <li><b>SUB COMENTÁRIOS</b></li>
            </ol>
        </li>
    </ol>
</div>


Exemplo numerando divs de 2 em dois como o incremento de 2 dentro do counter-increment

div {
    width: 100px;
    height: 100px;
    border: 1px solid;
    position: relative;
    display: inline-block;
    counter-increment: nDiv 2; /* começa o contador a partir de 2 e vai somando 2 a cada incremento */
}

div::before {
    content: counter(nDiv); /* mostra o valor do contador */
    position: absolute;
    top: 5px;
    left: 5px;
}
<div></div>
<div></div>
<div></div>
<div></div>


Aqui tem um exemplo de aplicação para fazer numeração de páginas:

  @page {
    size: A4;  
    margin: 70pt 60pt 170pt;
    counter-increment: page;
    @bottom-center {
      content: "Page " counter(page);
    }
  }

Exemplo de como começar a contagem por um determinado número em uma determinada página.

 @page { counter-increment: page } @page:first { counter-reset: page 9 }

A combinação de ambas as regras irá redefinir o contador para da primeira página para 9. Então, para cada página (incluindo a primeira), ela incrementará o contador. Isso resulta em um valor de contador de 10 para a primeira página, 11 para o segundo e assim por diante.

Fonte: https://www.tallcomponents.com/blog/css3-page-counter


Sobre o suporte dos browsers

Counter é uma propriedade relativamente antiga e amplamente aceita, até o IE8 já tem suporte para ela como vc pode consultar aqui: https://caniuse.com/#feat=css-counters

Referência e documentação

Aqui vc pode ler mais sobre o Counter https://developer.mozilla.org/pt-BR/docs/Web/CSS/CSS_Lists_and_Counters/Using_CSS_counters

1
  • Exemplo customizando Caracteres pré-definidos para a lista, tipo uma lista de JSON no CSS @counter-style sua-lista { system: cyclic; symbols: "🤓" "🤪" "😆" "😏" "😂" "🙂" "😀" "😃" "😎" "😊" "😄" "😁" "🤣" "😉" "😍" "🤩" "☺️" "😛" "😌" "🥸"; suffix: " "; } codepen.io/argyleink/pen/rNmzGzW
    – hugocsl
    Commented 28/07/2021 às 17:06
5

A propriedade counter-reset cria ou redefine um contador de CSS para um determinado valor.

A propriedade counter-increment faz o valor do contador ser aumentado ou diminuído.

Veja o exemplo, onde digo que meu_contador tem valor inicial 0, e depois de cada ocorrência é sempre incrementado +1. Note que o ::before permite inserir conteúdo antes de um elemento, neste caso antes de um item da lista. A propriedade content é para dizer ao navegador que o conteúdo deve ser colocado no início do elemento HTML.

<!DOCTYPE html>
<html>

<head>
  <style>
    body {
      /* definindo "meu_contador"  como 0 */
      counter-reset: meu_contador 0;
    }
    
    h2::before {
      /* Incrementado "meu_contador" como 1 */
      counter-increment: meu_contador 1;
      content: "Fruta " counter(meu_contador) ": ";
      color: black;
    }
    
    h1 {
      color: orange;
    }
    
    h2 {
      color: green;
    }
  </style>
</head>

<body>
  <h1>Lista de frutas:</h1>
  <h2>Uva </h2>
  <h2>Maçã</h2>
  <h2>Jabuticaba</h2>
  <h2>Pêra</h2>
  <h2>Banana</h2>
  <h2>Laranja</h2>

</body>

</html>

Sintaxes:

- counter-increment:

counter-increment: <custom-ident> <integer>

Onde:

  • <custom-ident>:

    É o nome do contador para incrementar.

  • <integer>:

    É o valor para adicionar ao contador.Se não forem especificados o valor padrão é 1.

Exemplo: counter-increment: exemplo_contador 2;

- counter-reset:

counter-reset: <custom-ident> <integer>

Onde:

  • <custom-ident>:

    É nome do contador para redefinir.

  • <integer>:

    É o valor para redefinir o contador em cada ocorrência do elemento. Se não forem especificados o valor padrão é 0.

Exemplo: counter-reset: exemplo_contador 1;

A imagem abaixo mostra a versão dos navegadores que suportam totalmente a propriedade:

Versão dos navegadores que suportam a propriedade

Referência:

MDN Web Docs

W3Schools

1
  • 1
    Muito boa resposta! Obrigado por compartilhar :) Commented 26/09/2018 às 18:43

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .