Contador

Una necesidad muy común es la de numerar elementos en nuestras páginas web.

Una manera muy sencilla, pero muy poco flexible, es utilizar listas ordenadas, <ol>, que por defecto numeran usando dígitos arábicos (los más habituales) pero que se pueden cambiar por otros tipos de numeración (números romanos o letras, por ejemplo). Sería algo así:

<ol>
    <li>Elemento 1
        <ol>
            <li>Lorem ipsum dolor sit amet.</li>
            <li>Consequuntur, in facilis quae praesentium?</li>
        </ol>
    </li>
    <li>Elemento 2
        <ol>
            <li>Lorem ipsum dolor sit amet.</li>
            <li>Quasi illo aperiam labore aliquid!</li>
        </ol>
    </li>
    <li>Elemento 3
        <ol>
            <li>Lorem ipsum dolor sit amet.</li>
            <li>Asperiores, id ab provident dolorem?</li>
        </ol>
    </li>
    <li>Elemento 4
        <ol>
            <li>Lorem ipsum dolor sit amet.</li>
            <li>Consectetur optio fuga culpa maxime.</li>
        </ol>
    </li>
    <li>Elemento 5
        <ol>
            <li>Lorem ipsum dolor sit amet.</li>
            <li>Ad ducimus quidem amet nostrum.</li>
        </ol>
    </li>
</ol>

En este caso tenemos varias listas ordenadas anidadas, que nos generan un listado como este:

ListaOrdenada

Esto está bien para necesidades muy básicas, pero no nos permite hacer muchas cosas como por ejemplo numerar con continuación diversas partes del documentos hijas de diferentes elementos, numerar con varios dígitos los sub-elementos anidados (como se puede observar en la figura anterior, los hijos empiezan de nuevo en 1, 2, etc...), mantener varias cuentas por separado...

Bienvenido a los contadores CSS

Para solucionar este problema, haya bastantes años que el W3C incluyó una especificación para crear contadores basados en CSS. De hecho forman parte de la especificación 2.1 de CSS, así que tiene ya unos cuantos años. Concretamente, aunque la versión definitiva se publicó todavía en 2011 (con la proverbial “velocidad” que caracteriza al W3C), la primera recomendación de CSS 2.1 data de febrero de 2004, e incluso muchos navegadores antiguos soportan gran parte de sus características. En concreto lo que voy a explicar a continuación está soportado a partir de Internet Explorer 8, y todos los demás navegadores (Firefox, Chrome, Opera y Safari) lo soportan. Así que podemos considerar que el soporte es completamente universal.

El funcionamiento es bastante sencillo. Disponemos de tres funciones y una variante:

  • counter-reset: permite establecer a cero un contador, al cual le proporcionamos un nombre.
  • counter-increment: incrementa en 1 el valor del contador.
  • counter: nos permite obtener el valor actualmente almacenado en el contador que le indiquemos.
  • counters: lo mismo que la anterior pero en plural. Sirve para leer el valor almacenado en un contador pero restringiendo su ámbito al nivel de anidamiento actual de elementos. Enseguida lo explico mejor con un ejemplo.

En su forma más básica su uso es muy sencillo. Por ejemplo, si tenemos los siguientes elementos en una página, que representan los diferentes epígrafes y sub-epígrafes de un documento:

<div id="Contenido">
    <h1>Introducción</h1>
    Lorem ipsum dolor...
    <h2>Los fundamentos</h2>
    Lorem ipsum dolor...
    <h2>Más información sobre el tema</h2>
    Lorem ipsum dolor...
    <h1>A fondo</h1>
    Lorem ipsum dolor...    
    <h2>Conceptos avanzados</h2>
    Lorem ipsum dolor...
</div>

Podemos definir las siguientes reglas CSS para poder numerarlos:

#Contenido {
    counter-reset: epigrafes;
}
 
h1:before {
    counter-reset: subepigrafes;
    counter-increment:epigrafes;
    content: "Epígrafe " counter(epigrafes) ".- ";
}
 
h2:before {
    counter-increment:subepigrafes;
    content: "Sub-epígrafe " counter(epigrafes) "." counter(subepigrafes) ".- ";
}

De este modo obtenemos el siguiente resultado:

Contadores_1

Como podemos ver, los H1 se han numerado metiéndole la palabra “Epígrafe” delante, y los H2 igualmente pero conservando la numeración de su “padre” y además añadiendo la palabra “Sub-epígrafe” delante.

Conseguirlo es muy fácil como podemos deducir de las reglas CSS anteriores:

  • Primeramente, en el div contenedor, inicializamos un contador al que llamamos “epigrafes”. Lo ponemos a cero con el estilo CSS counter-reset, que toma como parámetro el nombre del contador..
  • Utilizando el pseudo-elemento “:before” de cada encabezado de tipo H1, incrementamos en 1 el valor del contador “epígrafes” (propiedad CSS counter-increment) y además inicializamos un nuevo contador llamado “subepigrafes” (counter-reset otra vez) que se usará para numerar los elementos de tipo H2. Además le añadimos el texto “Epígrafe ” seguido del valor de contador correspondiente (usando la función CSS llamada counter).
  • Del mismo modo, utilizando el mismo pseudo-elemento “:before” pero esta vez en los H2, incrementamos en 1 el contador de los sub-epígrafes y colocamos delante el texto correspondiente a éstos, separando el valor de ambos contadores (epígrafe y subepigrafe) con un punto y colocando un “.- “ al final.

Como vemos es muy fácil seguir los pasos que se producen para llegar a la numeración que se ve en la figura.

En este post sólo he rascado la superficie de lo que se puede hacer con los contadores, ya que son mucho más potentes y ofrecen muchas otras posibilidades. Por ejemplo, anidación de contadores o diferentes estilos para visualización. También se comportan de manera diferente con algunos elementos (por ejemplo, cuando los elementos a los que afectan están ocultos, dependiendo de la manera de ocultarlos). Todo lo anterior, mas avanzado, lo explico con detalle y ejemplos en mi curso para aprender profesionalmente HTML(5) y CSS(3), el cual te recomiendo encarecidamente si estás interesado en aprender de verdad, y no con alfileres, estas tecnologías :-)

¡Espero que te sea útil!

💪🏻 ¿Este post te ha ayudado?, ¿has aprendido algo nuevo?
Pues NO te pido que me invites a un café... Te pido algo más fácil y mucho mejor

Escrito por un humano, no por una IA