CSS permite realizar numeraciones personalizadas sin necesidad de programar. Es parecido a las secuencias que permiten algunos sistemas gestores de bases de datos, pero aunque no tengas ni idea de programación ni SGBD te resultarán fáciles.

Antes de entrar con los contadores en sí, tenemos que hablar de la pseudo-clase :before
#elemento:before{
  content: “-”;
}
Este código CSS pondría un guión antes del elemento. Hay una clase :after equivalente, pero para después del elemento. Con esto podemos, por ejemplo, poner una imagen antes de cada elemento de un cierto tipo.
Utilizaremos la pseudo-clase before para colocar nuestra numeración. Los contadores se usan básicamente con 3 instrucciones: counter-reset, counter-increment y counter. Con counter-reset ponemos el valor inicial al contador cada vez que empiece un etiqueta, con counter-increment le decimos lo que incrementamos (por defecto 1, puede ser lo que queramos) y con counter accedemos al valor para mostrarlo. Ejemplo con dos listas:
<div
id=»listaMia»>
  • Cosa
  • Cosa
  • Cosa
  • Cosa
  • Cosa
  • Cosa
  • Cosa

#listaMia ul{

list-style:none;

counter-reset: li1;

}

#listaMia ul li:before{

counter-increment: li1;

content: counter(li1) «: «;

}

  • Cosa

  • Cosa

  • Cosa

    • Cosa
    • Cosa
    • Cosa

  • Cosa

Donde li1 es el nombre que yo he dado a esta numeración ya que podemos llevar varios contadores simultáneos cada uno con su nombre.
Si queremos que la numeración sea tipo 1.1, 1.2 en la sublista tenemos que pasar a usar la función counters, con s, con un segundo argumento que es la separación entre la numeración padre y la hija.
<div
id=»listaMia»>
  • Cosa
  • Cosa
  • Cosa
  • Cosa
  • Cosa
  • Cosa
  • Cosa

#listaMia2 ul{

list-style:none;

counter-reset: li2;

}

#listaMia2 li:before{

counter-increment: li2;

content: counters(li2,».») «: «;

}

  • Cosa

  • Cosa

  • Cosa

    • Cosa
    • Cosa
    • Cosa

  • Cosa

Al utilizarlo con listas no se nota mucho la mejora respecto a las numeraciones por defecto, pero si pensamos en los casos de numeración de comentarios, donde cada cabecera es un h3 en un div, podremos hacer algo parecido. También se puede personalizar la forma de contar y muchas cosas más.