Propiedad counter-reset (Referencia de CSS 2.1)

Definición	Inicializa el valor de uno o más contadores
Valores permitidos	Uno y sólo uno de los siguientes valores: Uno o más nombres de contadores seguidos opcionalmente por un número entero cada uno none inherit
Valor inicial	none
Se aplica a	Todos los elementos
Válida en	todos los medios
Se hereda	no
Definición en el estándar	w3.org/TR/CSS21/generate.html#propdef-counter-reset

Ejemplos de uso

La propiedad counter-reset se emplea para controlar la numeración automática de CSS 2.1 que se utiliza en las funciones counter() y counters() de la propiedad content.

El funcionamiento básico de la propiedad counter-reset es sencillo, pero su flexibilidad y la combinación con otras propiedades y funciones de CSS pueden complicar mucho su interpretación.

En el caso más sencillo, la propiedad counter-reset indica el nombre de un contador seguido opcionalmente por un número entero que indica el valor al que se inicializa el contador:

body {
  counter-reset: numero_capitulo 0;
}

La regla CSS anterior hace que se inicialice a 0 un contador llamado numero_capitulo cuando el navegador encuentre el elemento <body>. Si el contador no existía, el estándar CSS 2.1 indica que se crea cuando se encuentre el primer elemento <body>, es decir, al principio de la página.

La regla CSS anterior se puede emplear para crear el contador que se utiliza posteriormente en las propiedades counter-increment y content:

body {
  counter-reset: numero_capitulo 0;
}
h1:before {
  content: "Capítulo " counter(numero_capitulo);
  counter-increment: numero_capitulo 1;
}

Cuando se inicializa y se actualiza el valor de un contador en un mismo elemento, primero se inicializa su valor y después se actualiza según la propiedad counter-increment.

Si no se indica el número entero opcional, los navegadores suponen que vale 0, por lo que las siguientes reglas CSS son equivalentes a las anteriores:

body {
  counter-reset: numero_capitulo;
}
h1:before {
  content: "Capítulo " counter(numero_capitulo);
  counter-increment: numero_capitulo 1;
}

La propiedad counter-reset también cumple con el comportamiento en cascada de las propiedades CSS, por lo que en el siguiente ejemplo:

p {
  counter-reset: parrafos;
}
...
p {
  counter-reset: elementos;
}

Las reglas CSS anteriores provocan un colisión en el valor de la propiedad counter-reset. Según las normas de resolución de colisiones, en este caso gana la última regla y los elementos de tipo <p> sólo inicializan el valor del contador elementos.

Además de inicializar el valor de los contadores a 0, también es posible inicializarlos a cualquier otro valor entero positivo o negativo, tal y como muestra el siguiente ejemplo:

body {
  counter-reset: numero_capitulo -1;
}
h1:before {
  content: "Capítulo " counter(numero_capitulo);
  counter-increment: numero_capitulo;
  counter-reset: numero_seccion -1;
}

La propiedad counter-reset también permite indicar varios contadores para inicializarlos de forma simultánea:

h1 {
  counter-reset: numero_seccion numero_tabla numero_imagen;
}

La regla CSS anterior inicializa a 0 los contadores numero_seccion, numero_tabla y numero_imagen cada vez que se encuentra un elemento <h1> en la página. También es posible indicar diferentes valores iniciales para cada contador:

h1 {
  counter-reset: numero_seccion 0 numero_tabla -1 numero_imagen -1;
}

Además, también es posible indicar el mismo contador más de una vez en la propiedad counter-reset. En este caso, se realizan todas las inicializaciones en el orden indicado:

p {
  counter-reset: parrafos parrafos -1 parrafos 3;
}

p {
  counter-reset: parrafos parrafos -1 parrafos 3 parrafos;
}

La primera regla del ejemplo anterior inicializa el valor del contador parrafos a 3, mientras que la segunda regla inicializa el contador parrafos a 0. Como el navegador procesa las inicializaciones en el mismo orden indicado, la única que se tiene en cuenta es la última.

Los contadores tienen en cuenta el anidamiento de los elementos HTML. Si se consideran las siguientes reglas CSS:

div {
  counter-reset: numero_parrafo;
}
div p:before {
  content: "Parrafo " counter(numero_parrafo) " ";
  counter-increment: numero_parrafo;
}

La propiedad counter-reset crea o inicializa el valor del contador numero_parrafo cada vez que encuentra un elemento <div>. De esta forma, si la regla CSS anterior se aplica al siguiente código HTML:

<div>
  <p>Lorem ipsum dolor sit amet</p>
  <p>Lorem ipsum dolor sit amet</p>
  <p>Lorem ipsum dolor sit amet</p>
  <div>
    <p>Lorem ipsum dolor sit amet</p>
    <p>Lorem ipsum dolor sit amet</p>
    <p>Lorem ipsum dolor sit amet</p>
    <div>
      <p>Lorem ipsum dolor sit amet</p>
      <p>Lorem ipsum dolor sit amet</p>
      <p>Lorem ipsum dolor sit amet</p>
    </div>
  </div>
</div>

En el ejemplo anterior, el navegador crea automáticamente tres contadores diferentes pero con el mismo nombre (numero_parrafo). Cada vez que se encuentra un elemento <div>, el navegador crea o inicializa un contador llamado numero_parrafo, por lo que todos los párrafos del ejemplo anterior disponen de la misma numeración (1, 2 y 3).

Si se visualiza el ejemplo anterior con un navegador que soporte completamente las propiedades counter-reset, counter-increment y content, el resultado es el que muestra la siguiente imagen:

Los elementos ocultos mediante la propiedad display (display: none) no pueden modificar el valor de los contadores, mientras que los elementos ocultos mediante la propiedad visibility (visibility: hidden) si que los actualizan:

p.oculto {
  display: none;
  counter-reset: parrafos;  /* No se inicializa porque el elemento
                               se ha ocultado mediante display: none */
}

p.invisible {
  visibility: hidden;
  counter-reset: parrafos;  /* Se inicializa a 0 porque el elemento
                               se ha hecho invisible con visibility: hidden */
}