Anexo: Contadores: notas y ejemplos

Las imágenes ilustrativas con capturas de los ejemplos tal y como los presenta Firefox 2; haciendo clic sobre ellas se puede acceder al documento de prueba. El soporte de contenidos generados por medio de CSS varía en diversos navegadores. Sólo puedo asegurar —sobre mis propias pruebas— que los ejemplo se interpretan correctamente en Firefox 2, Opera 9 y la beta de Safari 3, sobre Windows. Ni Explorer 6 ni 7 soportan los contadores.

Contadores para elementos no anidados

Los contadores se emplean para generar una numeración automática similar a la que por defecto se muestra en las listas numeradas, pero pudiendo aplicarse a cualquier elemento. Unas reglas como las siguientes:


    body{
        counter-reset:seccion;
    }
    
    h1:before{
        counter-increment:seccion;
        content:counter(seccion)". ";
    }

numerarían los h1 de un documento del 1 en adelante, como se puede comprobar en este ejemplo o ver en la imagen siguiente:

: Encabezados de un documento numerados

Analizemos por partes las reglas:

counter-reset:seccion: Es necesario restablecer el contador para indicar al navegador que se va aplicar un contador a alguno de los hijos de un elemento —en este caso body—. Si no se indica esta especie de «escucha», el contador se añadiría a cada encabezado, pero el navegador lo trataría como independiente para cada h1, por lo que no se aplicaría el incremento:

Encabezados de un documento numerados sin restablecer el contador inicialmente
h1:before: Indico que el contador se genere antes del texto de los encabezados. Como para todos los valores de content, sólo se puede aplicar a un elemento al que se aplique además los pseudoselectores :before o :after.
counter-increment:seccion: Indico que el contador debe incrementarse para sucesivos h1. Como sólo indico el identificador del contador —seccion—, el incremento es de 1, el valor por defecto. Si quisiera, por ejemplo, que el incremento fuese de dos en dos, la declaración sería counter-increment:seccion 2. Hay que tener en cuenta que el incremento se aplica también al primer h1, así que aunque counter-reset restablece el valor de seccion a 0, el primer encabezado se numera con un 1. En el caso hipotético de incrementar el contador de dos en dos, el primer h1 iría precedido de un 2.
content:counter(seccion)". ": Indico que el contenido generado es un contador identificado como seccion, y además incluyo tras éste un punto y un espacio.

Hasta aquí, parece bastante claro, pero vamos a incluir varios contadores. El objetivo va a ser que los h1 se numeren como 1, 2, 3, etc., y que los h2 se numeren con un contador adicional, 1.1, 1.2, 2.1, etc.

Como no se trata más que de incluir un segundo contador, el error común es crear un estilo como el siguiente


    body{
        counter-reset:seccion;
        counter-reset:subseccion;
    }
    
    h1:before{
        counter-increment:seccion;
        content:counter(seccion)". ";
    }
    
    h2:before{
        counter-increment:subseccion;
        content:counter(seccion)"."counter(subseccion)". ";
    }

que tiene este resultado:

: Encabezados de un documento numerados con dos contadores, sin restablecer estos inicialmente

¿A qué se debe? A la primera regla. Como se aplica la cascada, y la declaración counter-reset:subseccion es posterior a counter-reset:seccion, anula ésta. La forma correcta de restablecer ambos valores es hacerlo en la misma declaración:


    body{
        counter-reset:seccion subseccion;
    }

Ahora sí, los contadores se incrementan correctamente:

: Encabezados de un documento numerados con dos contadores

Por último, quedaría la opción de seleccionar un estilo diferente. Para ello se emplean los mismo valores que para la propiedad list-style-type, especificada así:


    h2:before{
        counter-increment:subseccion;
        content:counter(seccion)"."counter(subseccion,lower-alpha)". ";
    }

En este caso, sustituiríamos los decimales de la numeración del segundo contador por letras:

: Encabezados de un documento numerados con dos contadores y estilo de lista lower-alpha

Pasemos ahora a los contadores y cómo se comportan en elementos anidados.

Contadores para elementos anidados

Como ejemplo vamos a emplear los contadores para numerar una lista. Vamos a aplicar las siguientes reglas:


    ol{
        counter-reset:listado;
    }
    
    ol ol {
        counter-reset:listado_anidado;
    }
    
    li{
        list-style:none;
    }
    
    li:before{
        content:counter(listado)". ";
        counter-increment:listado;
    }
    
    li li:before{
        content:counter(listado)"."counter(listado_anidado)". ";
        counter-increment:listado_anidado;
    }

El aspecto que presenta nuestra lista es el siguiente:

: Lista numerada con un nivel anidado

Sin embargo, ¿qué ocurriría si añadiésemos un nivel adicional de anidamiento? Pues que para el tercer nivel se generaría el mismo contenido que para el segundo, dado que no hemos definido un contador para ese nivel:

: Lista numerada con dos niveles anidados y sin contador adicional

Podríamos añadir más reglas a la hoja de estilo para cubrir el total de niveles anidados, pero sería un sistema muy poco eficiente, más aún si desconocemos el número de niveles máximos que vamos a necesitar para nuestros documentos. Por ello existe counters():


    ol{
        counter-reset:listado;
    }
    
    li{
        list-style:none;
    }
    
    li:before{
        content:counters(listado,".")". ";
        counter-increment:listado;
    }

Lo que hace es crear un marcador con tantos contadores como sea necesario para cubrir todos los niveles de anidamiento, concatenados por medio de la cadena que se incluye como segundo parámetro:

: Lista numerada con por medio de counters()

Por último, igual que para counter(), se puede definir el estilo del contador. Por ejemplo, la declaración content:counters(listado,".",upper-roman)". " sustituye los decimales por números romanos:

: Lista numerada con por medio de counters(), con un estilo de lista aplicado

Sin embargo, en la sección de contenido generado de la especificación de CSS 2.1 (inglés) no hay sintaxis para definir estilos independientes de los componentes del marcador que genera counters(), aunque no parece que hubiese sido muy difícil permitir como tercer parámetro una lista de estilos para sucesivos niveles separados por espacios, algo como counters(listado,".",upper-roman lower-roman lower-alpha).

Y hasta aquí, esta pequeña introducción a los contadores.

Volver al curso