Cómo numerar elementos automáticamente con contadores CSS

Los contadores CSS se utilizan para agregar recuentos a los elementos. El recuento se agrega proporcionando variables que se pueden inicializar (usando counter-reset), y estas variables se pueden incrementar mediante reglas CSS.

Muchos desarrolladores pasan por alto esta poderosa función CSS, y es por eso que vamos a repasar cómo trabajar con contadores en este tutorial.

Cuándo usar contadores CSS

Los contadores CSS se pueden utilizar siempre que necesite un sistema de conteo en su página web. Algunos de los mejores casos de uso son:

Numeración de listas complejas
Crea enlaces de paginación dinámica
Numeración de pasos en un sistema de incorporación.

En este tutorial, hablaremos sobre cómo usar contadores CSS para hacer listas complejas y crear paginación dinámica .

Cómo utilizar contadores CSS

El sistema de conteo de CSS consiste en los counter-reset, counter-increment, counter()y counters()y contentpropiedades. Estas propiedades se encargan de todo lo que necesita hacer en el sistema de conteo CSS.

Veamos más de cerca estas propiedades para comprender cómo se pueden usar.

Explicación de las propiedades del contador

counter-reset: Se utiliza para restablecer o inicializar su contador. Para utilizar contadores CSS, primero debe crear uno con esta propiedad.
counter-increment: Se utiliza para incrementar la variable de un contador ya inicializado .
counter(): Esta función hace la magia. Se utiliza dentro de la propiedad de contenido, en una :beforeo :afterselector de pseudo, al sumar los conteos.
counters(): Se utiliza para el recuento heredado y genera la instancia de una variable de contador padre en el hijo.
content: Se utiliza para sumar el valor de conteo (cadenas) manipulando el contenido de los selectores de CSS :beforey :after.

Ahora que entendemos estas propiedades y valores de contador CSS, profundicemos en nuestros ejemplos.

Numeración de elementos en una página web

La numeración se puede hacer en HTML, pero la numeración CSS proporciona formas dinámicas y fáciles de controlar de hacer el trabajo utilizando contadores CSS. El siguiente ejemplo numerará los elementos de la página web con CSS.

Primero, vamos a configurar una numeración simple que solo hace una numeración de un nivel. Luego pasaremos a un ejemplo más avanzado donde configuraremos una tabla de contenido.

Numeración simple

En este ejemplo, crearemos un contador de elementos simple con CSS. En su HTML, simplemente cree la estructura de sus elementos de esta manera:

Mercury
Venus
Earth

En el CSS vamos a hacer tres cosas clave:

Inicialice el contador en el div padre usando counter-reset
Incrementar el valor del contador en 1 en el niño div pusandocounter-increment
Agregue las variables de contador antes del div pcontenido usando el :beforepseudo selector.

¡Vamonos!

div { list-style-type: none; counter-reset: css-counter 0; /* initializes counter to 0; use -1 for zero-based numbering */ } div p { counter-increment: css-counter 1; /* Increase the counter by 1. */ } div p:before { content: counter(css-counter) ". "; /* Apply counter before children's content. */ }

El resultado

La numeración anterior se realizó con CSS puro. Interesante, ¿verdad?

Ahora vamos a implementar una numeración más compleja que hace que valga la pena aprender los contadores CSS. Estaremos numerando elementos anidados con la counters()función, que se puede usar para el conteo heredado. Esto genera la instancia de un contador padre en el hijo.

Tabla de contenido Numeración


    
      Web Development 
      
       HTML
        CSS 
        
         CSS Introduction
         CSS Selectors
         CSS Animation
        
       JavaScript
      
     Graphics Design
     Computer Education

El CSS se ve así:

ul { list-style-type: none; counter-reset: css-counters 0; /* intializes counter, set -1 for zero-based counters */ } ul li:before { counter-increment: css-counters; content: counters(css-counters, ".") " "; /* generates inherited counters from parents */ }

El resultado

Ahora puedes ver el poder de anidar cuenta counters(). Esto le evita la molestia de anidar incorrectamente. Para ayudarlo a evitar errores, hereda las propiedades de contador de los padres y le agrega el contador del niño.

Entonces, ahora que somos buenos con la numeración de elementos, ¿qué sigue?

Haciendo paginación dinámica

Hacer paginación con contadores CSS es bastante sencillo. La paginación generalmente se realiza con HTML, repitiendo el mismo conjunto de elementos y cambiando los números dentro para crear navegación a cada página de un resultado.

Un desarrollador puede optar por usar algo dinámico como hacer bucles que generen los elementos, o hacerlo desde el servidor. ¡Pero hoy vamos a usar CSS para hacer esto de forma dinámica!

¿Cómo? Con nuestra counters()función senior .

The same way we have been incrementing our values for the numbering above, we can also make a dynamic pagination list with (you guessed it) CSS counters.

Let's start:


    
     <
     >

Note: You don't need to add numbers inside the li, and you can make as many as you want. Our CSS counters() are going to do the numbering for us.

The CSS looks like this:

ul { list-style-type: none; counter-reset: paginate-counter 0; } ul li { border: solid 3px #ccc; color: #36f; border: 5px; float: left; margin: 5px; padding: 8px 10px; font-size: 14px; cursor: pointer; text-align: center; } /* Setting styles for the inner text */ ul li:not(.previous):not(.next):before { counter-increment: paginate-counter; content: counter(paginate-counter); }

The Result

What else can you do with counters? Let me hear your ideas.

Thanks!