Ejemplos de uso

La propiedad counter-increment 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-increment 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-increment indica el nombre de un contador seguido opcionalmente por un número entero que indica la cantidad en la que se incrementa:

h1 {
  counter-increment: numero_capitulo 1;
}

La regla CSS anterior hace que se incremente en una unidad el valor de un contador llamado numero_capitulo cada vez que la página incluya un elemento <h1>. Si el contador no existía, el estándar CSS 3 indica que cuando se encuentre el primer elemento <h1>, se crea el contador, se inicializa al valor 0 y posteriormente se actualiza su valor según la propiedad counter-increment indicada.

Este contador básico se puede emplear para añadir una numeración automática a los elementos <h1> de la página:

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

Cuando se actualiza y se utiliza el valor de un contador en un mismo elemento, primero se actualiza su valor y después se utiliza en la propiedad content.

Si no se indica el número entero opcional, los navegadores suponen que vale 1, por lo que la siguiente regla CSS es equivalente a la anterior:

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

Además de incrementar el valor de los contadores, también es posible decrementarlo o no modificarlo. El siguiente ejemplo amplía el anterior para no incrementar el valor del contador en algunos elementos <h1> especiales:

h1:before {
  content: "Capítulo " counter(numero_capitulo);
  counter-increment: numero_capitulo;
}
h1.especial {
  counter-increment: numero_capitulo 0;
}

No obstante, si se quiere inicializar un contador para que vuelva a valer 0 o cualquier otro valor numérico, es preciso utilizar la propiedad counter-reset.

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

p {
  counter-increment: elementos parrafos especial 2;
}

La regla CSS anterior incrementa en una unidad el valor de los contadores elementos y parrafos cada vez que se encuentra un elemento <p> en la página. Además, incrementa en 2 unidades el valor de otro contador llamado especial cada vez que encuentra un elemento <p>.

También es posible indicar el mismo contador más de una vez en la propiedad counter-increment:

p {
  counter-increment: elementos parrafos especial 2 parrafos elementos 3;
}

En el ejemplo anterior, cada vez que se encuentra un elemento <p> en la página se incrementa 4 unidades el valor del contador elementos, 2 unidades el valor del contador parrafos y 2 unidades el valor del contador especial.

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-increment, counter-reset y content, el resultado es el que muestra la siguiente imagen:

Los elementos ocultos mediante la propiedad display (display: none) no modifican 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-increment: parrafos;  /* No se actualiza porque el elemento
                                   se ha ocultado mediante display: none */
}

p.invisible {
  visibility: hidden;
  counter-increment: parrafos;  /* Se actualiza porque el elemento
                                   se ha hecho invisible con visibility: hidden */
}