Contadores y estilos de lista

Muchos tipos de contenido se representan mejor como una lista HTML list. En el caso del contenido de la lista ordenada, como los pasos de una receta o las notas al pie de un artículo, el marcador también suele contener información. CSS proporciona varias formas de controlar los contadores de una lista.

Estilos de lista

Existe una amplia variedad de tipos de estilos de lista predefinidos que admiten números, letras del alfabeto, números romanos y muchos sistemas de conteo internacionales.

Además de los estilos compatibles con los navegadores, W3C publicó Ready-made Counter Styles, con compatibilidad para 181 estilos adicionales en 45 sistemas de escritura.

Si estas opciones no se ajustan a tus necesidades, también puedes definir un @counter-style personalizado. Esto te permite especificar símbolos personalizados, un prefijo y un sufijo, y mucho más.

De forma predeterminada, el marcador de elementos es outside la lista, se posiciona delante de la lista y se alinea a la derecha. También puedes posicionar el marcador de elementos dentro de la lista con list-style-position: inside.

Contadores

Si bien los estilos de lista controlan cómo se muestran los marcadores de elementos de la lista, los contadores te permiten controlar los valores que se mostrarán. Para los elementos de la lista <li>, el navegador crea un contador llamado list-item que se incrementa en 1 por cada elemento de la lista que se encuentra.

Los contadores de CSS mantienen un recuento continuo de la cantidad de veces que se renderiza un elemento que tiene un valor counter-increment correspondiente establecido.

Para crear un contador nuevo, usa counter-reset con un nombre de contador y, de manera opcional, un valor inicial. A menudo, lo establecerás en un elemento superior que contenga todos los elementos que se contarán.

Luego, agrega una propiedad counter-increment en cada elemento que quieras contar.

Por último, muestra el valor del contador con la función counter().

En este ejemplo, queremos mostrar el recuento continuo de notas al pie como el texto del vínculo de cada nota al pie. Como queremos un solo contador para todo el documento, establecemos counter-reset: note en el cuerpo y aumentamos en cada vínculo de nota al pie.

También puedes tener varios contadores que cuenten diferentes elementos. En el ejemplo de notas al pie, ¿qué sucede si quieres mostrar el índice de la sección y el párrafo en el que se encuentra la nota al pie?

El recuento de secciones se puede crear en el cuerpo con counter-reset y, luego, aumentar en cada elemento <h2>. Queremos que el recuento de párrafos se restablezca para cada sección, por lo que usaremos counter-reset en los elementos <h2> y aumentaremos en los elementos <p>.

Por último, combinamos los valores del contador en la propiedad content.

a:after {
  content: "(S" counter(section) "P" counter(paragraph) "N" counter(note) ")";
  font-size: small;
  vertical-align: super;
}

Contadores anidados

¿Qué sucede cuando anidas una lista dentro de otra? El contador list-item se inicializa para cada elemento <ul> o <ol>, y el uso de counter() solo devuelve la cantidad del recuento más interno. Si quieres mostrar el recuento de cada uno de los contadores anidados, usa la función counters(), que toma un nombre de contador y un separador.

li::marker {
  content: counters(list-item, ".")
  }

Contadores inversos

De forma predeterminada, los contadores (incluido el contador list-item implícito para los elementos <ol>) comienzan en 0 y aumentan en uno para cada elemento, lo que significa que el primero se contará como 1. ¿Qué sucede si quieres contar hacia atrás hasta 1?

Para ello, agrega el atributo reversed a <ol>. Si usas el estilo de lista estándar, los marcadores funcionarán según lo previsto. Sin embargo, si usas un contador personalizado, deberás establecer counter-increment en un valor negativo y calcular el valor inicial del contador de forma manual.

Verifique sus conocimientos