Contadores CSS

Cuántas veces hemos necesitado autonombrar elementos HTML y para ello hemos hecho un bucle en PHP que lo que hace es añadirle un número consecutivo a cada elemento?. Vale, es la solución más portable, pero CSS desde 2.1 soportaría realizar esa función de forma nativa lo caul puede ser útil cuando por ejemplo no se disponga de soporte de lenguajes de script o no se quieran usar.

Estaría soportado desde IE7 y superiores (y por supuesto por el resto de los navegadores de verdad) y la técnica se basa en utilizar las propiedades CSS counter-reset y counter-increment junto con la propiedad content dentro del pseudoelemento :before para autogenerar ids. Se puede hasta anidar contadores!

Los contadores se inicializan con

counter-reset: nombre_del_contador;

Y se incrementarían con

counter-increment: nombre_del_contador;

Se puede referenciar al valor como si fuera una "función" con la palabra reservada

counters

Vamos a ello.

En el primer ejemplo, se va a numerar atomáticamente cada sección de una página de modo que para cada sección, indicada por <h1>s tenga automáticamente la palabra "Sección <n>" con <n> el número de sección.

Primero, reseteamos el contador para que empiece por 1:

body {counter-reset: thecounter} /* el nombre del contador sería "thecounter" */

Cada <h1> cogería el prefijo "Sección " añadiéndole el contador que automáticamente se incrementaría para cada sección (que es por defecto y se puede obviar), donde "thecounter" es el nombre del contador que se va a usar para nombrar las secciones:

.counter h1:before {
    counter-increment: thecounter 1;
    content:"Sección "counter(thecounter)":";
}

Para una lista numerada anidada el contador se resetea y la numeración automática de los <ol> se desactiva porque no soporta anidamiento

ol {
    counter-reset: section;
    list-style-type: none;
}

Ahora, cada <li> recive indentación automática y sel sepearador se fija al punto "." seguido por un espacio en blanco

li:before {
    counter-increment: section;
    content: counters(section,".")"";
}

El ejemplo completo sería:

<ol>
    <li>item</li>           <!-- 1 -->
    <li>item                <!-- 2 -->
        <ol>
            <li>item</li>   <!-- 1.1 -->
            <li>item</li>   <!-- 1.2 -->
        </ol>
    </li>
    <li>item</li>           <!-- 3 -->
<ol>