CSS avanzado
Capítulo 4. Propiedades avanzadas
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; }
www.librosweb.es
97