Haciendo uso de Contadores CSS

Demo Github

Contar elementos es una tarea que se realiza constantemente en diferentes Proyectos a nivel de Programación, por ejemplo si tenemos una tabla con muchos registros, se necesita contar la cantidad para realizar una determinada acción como crear una paginación que cada 20 elementos se añada un número de Página, por otro lado se puede mantener el conteo de productos en stock y muchas otras tareas más, mediante CSS podemos hacer esto y este Post te explicaré como hacerlo.

Normalmente se realizan conteos de elementos haciendo uso de Lenguajes como Javascript o un Lenguaje de Servidor como Ruby, PHP, Python, etc., y esto hace que se consuman recursos de memoria en el Sistema, pero esto lo podemos evitar haciendo uso de CSS para contar los elementos.

Conteo de Encabezados

Por ejemplo en una página HTML podemos tener muchos elementos de tipo <section></section> o secciones y cada sección puede tener un encabezado <h2> que contiene el titulo de la sección y debajo el contenido en un párrafo

Por ejemplo si necesito enumerar cada encabezado <h2> asignándole un número al lado izquierdo del texto del encabezado <h2>, por ejemplo

Pero como tengo muchos encabezados <h2>, pues me puedo ahorrar el trabajo de colocar un número a cada uno haciendo uso de contadores CSS. Lo primero que puedo hacer es inicializar un contador estableciendo el valor en 0 en la etiqueta body de la siguiente manera, a nivel CSS haciendo uso de la propiedad counter-reset

Ahora para cada <section> voy a incrementar el contador * 1, a nivel CSS seria de las siguiente manera haciendo uso de la propiedad counter-increment

Con esto obtengo enumerados todos mis encabezados, es decir con un número al lado izquierdo de cada texto del encabezado <h2>

Conteo de Filas de una Tabla

Si cuento con una tabla con muchos registros, puede que necesite obtener la cantidad de registros que hay en la tabla, esto lo puedo hacer haciendo uso de Contadores CSS, por ejemplo si tengo una Lista de Bebidas

El conteo de filas es algo similar al conteo de encabezados <h2> que explique anteriormente, la diferencia es que solo necesito obtener el valor total de bebidas y no  el valor o contenido de cada fila.

Inicio un contador de las filas de la tabla (rows) haciendo uso de la propiedad counter-reset

Luego para cada fila <tr> en el cuerpo de la tabla <tbody> le incremento el contador con la propiedad counter-increment

Por último obtengo el número total de filas y lo coloco en la etiqueta <span class=”total”></span> que se encuentra en el footer de la tabla

Agrego a mi tabla un <tfoot> o Footer y dentro de ella colocare un elemento <span> con el nombre de clase total

A continuación, todo el código de mi tabla HTML

Entonces mi tabla mostrará cuantas filas o bebidas existen en ella

Si agrego o elimino filas de mi tabla, el contador se actualizará automáticamente.

Conclusión

Los contadores CSS pueden ser muy útiles si los aplicas de manera ideal sobre tu código, si necesitas hacer conteo de otros elementos, pues en este Post te he dejado una idea de como puedes hacerlo, es cuestión que juegues con ellos hasta lograr hacer el conteo que necesites hacer.

Nota (s)

• Al inicio de este Post he colocado un enlace al repositorio GitHub y una Demo para que puedas ver el código en funcionamiento.

 

Síguenos en las Redes Sociales para que no te pierdas nuestros próximos contenidos.