Contadores

Supongamos que en una página debemos desarrollar un tema con varias secciones que incluyen distintas sub-secciones compuestas por párrafos. Para numerar las secciones y sub-secciones deberíamos escribir el número de orden antes de cada título y subtítulo; si se alterara el orden de las secciones deberíamos nuevamente modificar esos números para que coincidieran con la nueva organización. Demasiado complicado.

Es aquí donde de advierte el beneficio del contenido generado por las CSS: podemos hacer que cada antes de cada título y subtítulo se inserte el número de orden, de modo que si la composición sufre algún cambio no deberemos preocuparnos por numerar nuevamente el trabajo "a mano". A continuación del siguiente ejemplo, están las reglas de estilo y su explicación.

Primer título

Primer subtítulo del primer título

Texto, texto, texto, texto, texto, texto, texto, texto, texto, texto, texto, texto, texto, texto, texto, texto, texto, texto, texto.

Segundo subtítulo del primer título

Texto, texto, texto, texto, texto, texto, texto, texto, texto, texto, texto, texto, texto, texto, texto, texto, texto, texto, texto.

 

Este tema no tiene un título (en realidad lo único que contiene es un espacio en blanco) pero sí aparece el texto generado por la hoja de estilo (Tema X.)

Primer subtítulo del segundo título

Texto, texto, texto, texto, texto, texto, texto, texto, texto, texto, texto, texto, texto, texto, texto, texto, texto, texto, texto.

Segundo subtítulo del segundo título

Texto, texto, texto, texto, texto, texto, texto, texto, texto, texto, texto, texto, texto, texto, texto, texto, texto, texto, texto.

Tercer título

Primer subtítulo del tercer título

Texto, texto, texto, texto, texto, texto, texto, texto, texto, texto, texto, texto, texto, texto, texto, texto, texto, texto, texto.

Segundo subtítulo del tercer título

Texto, texto, texto, texto, texto, texto, texto, texto, texto, texto, texto, texto, texto, texto, texto, texto, texto, texto, texto.

H1:before { content: "Tema " counter(sección) ". ";
            counter-increment: sección;
            counter-reset: sub-sección; }
H2:before { content: counter(sección) "." counter(sub-sección) " ";
            counter-increment: sub-sección; }

Explicación:

H1:before { content: "Tema " counter(sección) ". "
Antes de cada título se inserta la cadena de texto "Tema ", seguida del contador que hemos denominado sección, seguido de la cadena ". " (punto y espacio).
counter-increment: sección
Se incrementa en 1 el contador sección (Cada vez que aparece un elemento <H1> el número del contador suma 1).
counter-reset: sub-sección
Se vuelve a cero el contador para <H2> (que llamamos sub-sección), así cada vez que hay un subtítulo (<H2>) comienza desde 1.
H2:before { content: counter(sección) "." counter(sub-sección) " "
Antes de cada elemento <H2> se inserta el contador sección, luego un punto, luego el contador sub-sección y luego un espacio en blanco.
counter-increment: sub-sección
Se incrementa el contador sub-sección en 1. Si quisiéramos un incremento de 2 en 2, por ejemplo, bastaría con poner counter-increment: sub-sección 2 y la numeración seguiría el orden: 1, 1.2, 1.4 ... 2, 2.2, 2.4 ...