CSS - reinicio del contador

Descripción

La propiedad de reinicio del contador establece un contador con nombre en un valor específico.

Valores posibles

name- El nombre de un contador. El nombre puede ser cualquier valor de cadena.
integer- Define un incremento para el contador nombrado cada vez que el elemento aparece en el documento. Este incremento puede ser cero o incluso negativo. Si no se proporciona ningún número entero, el contador se incrementa en uno.
none - No se realiza ningún incremento.

Se aplica a

Todos los elementos HTML.

Sintaxis DOM

object.style.counterReset = "section 1";

Ejemplo

Este ejemplo muestra una forma de numerar capítulos y secciones con "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>

Producirá el siguiente resultado:

La propiedad 'counter-reset' sigue las reglas en cascada. Por lo tanto, debido a la cascada, la siguiente hoja de estilo solo restablecerá 'imagenum' -

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

Para restablecer ambos contadores, deben especificarse juntos:

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

↰ Previous page