CSS - reset do contador

Descrição

A propriedade counter-reset define um contador nomeado para um valor específico.

Valores possíveis

name- O nome de um contador. O nome pode ser qualquer valor de string.
integer- Define um incremento para o contador nomeado cada vez que o elemento aparece no documento. Este incremento pode ser zero ou mesmo negativo. Se nenhum inteiro for fornecido, o contador é incrementado em um.
none - Nenhum incremento é executado.

Aplica-se a

Todos os elementos HTML.

Sintaxe DOM

object.style.counterReset = "section 1";

Exemplo

Este exemplo mostra uma maneira de numerar capítulos e seções com "Capítulo 1", "1,1", "1,2", etc.

<html>
   <head>
      <style>
         body {
            counter-reset: section;
         }
         h1 {
            counter-reset: subsection;
         }
         h1:before {
            counter-increment: section;
            content: "Section " counter(section) ". ";
         }
         h2:before {
            counter-increment: subsection;
            content: counter(section) "." counter(subsection) " ";
         }
      </style>
   </head>

   <body>
      <h1> Tutorialspoint.com</h1>
      <h2> Tutorialspoint.com</h2>
      <h2> Tutorialspoint.com</h2>
      <h2> Tutorialspoint.com</h2>
      <h2> Tutorialspoint.com</h2>
   </body>
</html>

Isso produzirá o seguinte resultado -

A propriedade 'counter-reset' segue as regras em cascata. Assim, devido ao cascateamento, a folha de estilo a seguir irá redefinir apenas 'imagenum' -

h1 { counter-reset: section -1 }
h1 { counter-reset: imagenum 99 }

Para redefinir os dois contadores, eles devem ser especificados juntos -

h1 { counter-reset: section -1 imagenum 99 }

↰ Previous page