Propiedad CSS counter-reset

La propiedad counter-reset crea uno o más contadores CSS y los establece a un valor inicial. A pesar del nombre, su función principal es inicializar un contador para que pueda usarse más adelante — no simplemente pone a cero un contador existente, sino que lo trae a la existencia en el ámbito actual.

Los contadores CSS son variables mantenidas por el navegador cuyos valores pueden incrementarse mediante reglas CSS para rastrear cuántas veces se utilizan. Permiten numerar secciones, capítulos, elementos de lista o cualquier elemento repetido enteramente en CSS, sin cambios en el marcado ni JavaScript.

Un contador solo es útil como parte de un trío de propiedades:

counter-reset — crea el contador y le asigna un valor inicial (esta página).
counter-increment — añade al valor del contador, normalmente una vez por cada elemento que coincida.
content — muestra el valor del contador mediante la función counter() o counters(), típicamente dentro de un pseudoelemento ::before.

Esta página cubre la sintaxis de counter-reset, cómo funciona el ámbito de los contadores, la numeración de secciones anidadas, el uso de valores iniciales negativos y personalizados, y los valores que acepta la propiedad.

Cómo funciona

Cada declaración de counter-reset toma un nombre de contador que tú eliges (por ejemplo section) seguido de un entero opcional como valor inicial:

/* "section" counter created, starts at 0 */
counter-reset: section;

/* "section" counter created, starts at 5 */
counter-reset: section 5;

/* multiple counters in one declaration */
counter-reset: chapter 0 page 1;

Si omites el número, el contador comienza en 0. El primer elemento coincidente ejecuta counter-increment antes de que content lo lea, por lo que un contador que empieza en 0 e incrementa en 1 se muestra como 1 en el primer elemento — que es generalmente lo que se quiere.

El ámbito importa. Un contador creado con counter-reset tiene su ámbito limitado al elemento en el que se declara y a sus descendientes y hermanos siguientes. Esto es lo que permite reiniciar un subcontador para cada sección: colocar counter-reset: subsection en cada h2 otorga a cada sección su propio contador subsection desde cero. El ejemplo de numeración anidada más adelante se basa en este comportamiento.

Valor inicial	none
Se aplica a	Todos los elementos.
Heredado	No.
Animable	No.
Versión	CSS2
Sintaxis DOM	object.style.counterReset = "section" ;

Sintaxis

counter-reset: none | name number | initial | inherit;

El name es un identificador que tú eliges, y number es un entero opcional (puede ser negativo). Puedes listar varios pares name number en una declaración para crear múltiples contadores a la vez.

Ejemplo: establecer un contador con JavaScript

counter-reset también es accesible desde el DOM como element.style.counterReset. Haz clic en "Pruébalo" para restablecer el contador section a 5, de modo que los encabezados se renumeren comenzando desde 6.

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      h2::before {
        counter-increment: section;
        content: "Book " counter(section) ". ";
      }
    </style>
  </head>
  <body>
    <p>Click the "Try it" button to set the counter-reset property:</p>
    <button onclick="myFunction()">Try it</button>
    <h2>HTML Tutorials</h2>
    <h2>JavaScript Tutorials</h2>
    <h2>CSS Tutorials</h2>
    <script>
      function myFunction() {
        document.body.style.counterReset = "section 5";
      }
    </script>
  </body>
</html>

Pruébalo tú mismo »

Ejemplo con incremento negativo (cuenta regresiva)

Se permiten números negativos tanto como valores iniciales como en counter-increment. Aquí el contador se crea en 0 y el incremento es -1, por lo que cada encabezado cuenta hacia abajo: -1, -2, -3, -4.

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      body {
        /* create "my-counter", start at 0 */
        counter-reset: my-counter;
      }
      h2::before {
        /* decrease "my-counter" by 1 on each h2 */
        counter-increment: my-counter -1;
        content: "Section " counter(my-counter) ". ";
      }
    </style>
  </head>
  <body>
    <h2>HTML Tutorial</h2>
    <h2>CSS Tutorial</h2>
    <h2>JavaScript Tutorial</h2>
    <h2>PHP Tutorial</h2>
  </body>
</html>

Pruébalo tú mismo »

Ejemplo con secciones y subsecciones numeradas

Este es el uso más común en el mundo real de counter-reset: numeración anidada como 1.1, 1.2, 2.1. El contador subsection se reinicia en cada h2, de modo que cada sección reinicia su numeración de subsecciones desde 1. Sin ese reinicio por cada h2, las subsecciones seguirían aumentando a lo largo de todo el documento.

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      body {
        /* Set "section" to 0 */
        counter-reset: section;
      }
      h2 {
        /* Set "subsection" to 0 */
        counter-reset: subsection;
      }
      h2::before {
        counter-increment: section;
        content: "Book " counter(section) ": ";
      }
      h3::before {
        counter-increment: subsection;
        content: counter(section) "." counter(subsection) " ";
      }
    </style>
  </head>
  <body>
    <h2>HTML</h2>
    <h3>HTML Basics</h3>
    <h3>HTML Templates</h3>
    <h3>HTML References</h3>
    <h3>HTML Tags</h3>
    <h2>CSS</h2>
    <h3>CSS Basics</h3>
    <h3>CSS References</h3>
    <h3>CSS Advanced</h3>
    <h3>CSS Guides</h3>
    <h3>CSS Selectors</h3>
    <h3>CSS Properties</h3>
  </body>
</html>

Pruébalo tú mismo »

Valores

Valor	Descripción
none	Los contadores no se incrementan.
name number	Name define el nombre del contador a reiniciar. Number define el valor al que se reinicia el contador en cada aparición del elemento. El valor predeterminado es 0 si no se especifica.
initial	Establece la propiedad a su valor predeterminado.
inherit	Hereda la propiedad de su elemento padre.

Errores comunes

Nada se muestra por sí solo. counter-reset solo crea el contador. Aún necesitas counter-increment para avanzarlo y content: counter(name) para mostrarlo. Una página con solo counter-reset no renderiza ningún número.
counter-reset vs counter-set. counter-reset crea un contador en el ámbito actual; el más nuevo counter-set solo cambia el valor de un contador que ya existe y nunca crea un nuevo ámbito. Usa counter-reset cuando quieras que la numeración se reinicie dentro de una sección.
El incremento se ejecuta antes que la visualización. Dado que el incremento en un ::before ocurre antes de que se lea content, un contador que empieza en 0 con +1 muestra 1 en el primer elemento. Empieza con un valor diferente si necesitas un primer número distinto.
Los contadores no se heredan. El valor de la propiedad no se hereda, pero el contador en sí es visible para los descendientes y hermanos siguientes a través del ámbito — eso es lo que hace que funcione la numeración anidada.

Compatibilidad con navegadores

counter-reset forma parte de CSS2 y es compatible con todos los navegadores modernos, incluidos Chrome, Firefox, Safari, Edge y Opera.

Práctica

¿Para qué se usa la propiedad CSS 'counter-reset'?

Se usa para evitar la recurrencia de un elemento.Crea o reinicia contadores CSS en una lista o cualquier otro elemento.Aplica estilo al color de fondo de un elemento.Añade una imagen o degradado a un elemento HTML.Posiciona elementos como 'fixed', 'relative' o 'absolute'.Se usa frecuentemente junto con las propiedades 'counter-increment' y 'content'.