Definición | Actualiza el valor de uno o más contadores |
---|---|
Valores permitidos | Uno y sólo uno de los siguientes valores:
|
Valor inicial | none |
Se aplica a | Todos los elementos |
Válida en | all |
Se hereda | no |
Definición en el estándar | http://www.w3.org/TR/CSS21/generate.html#propdef-counter-increment |
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 2.1 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 */ }