CSS: Contadores

CSS permite crear contadores personalizados con el fin de enumerar listas de elementos HTML. Gracias a esta característica es posible controlar la numeración o incluso modificarla para usar otros caracteres.

Los contadores personalizados se crean con las propiedades counter-increment, counter-reset y counter-set. No obstante, para poder mostrarlos se usa la propiedad content, que permite añadir contenido estético, y algunas de sus funciones, como es el caso de counter() y counters(). Además, con la regla arroba @counter-style se puede personalizar sus estilos.

El funcionamiento de los contadores CSS es sencillo. Es habitual usarlos en elementos HTML de definición de listas, ya sean ordenadas (<ol>) o no ordenadas (<ul>), para modificar el contador de los elementos de la lista (<li>). No obstante, se puede crear contadores sobre cualquier elemento HTML.

Propiedades para crear contadores:

Funciones para la propiedad content:

Regla arroba para personalizar los símbolos de contadores:

Vamos a ver un ejemplo de creación de un contador personalizado. Se trata de enumerar unos párrafos usando la sintaxis n. –. Al contador le asignamos un nombre o identificador llamado mi-contador.

Código CSS:

.enumera p {
  counter-increment: mi-contador;
}

.enumera p::before {
  color: red;
  content: counter(mi-contador) ". –";
}

Código HTML:

<section class="enumera">
  <p>Primer párrafo.</p>
  <p>Segundo párrafo.</p>
  <p>Tercer párrafo.</p>
</section>

Resultado:

Primer párrafo.

Segundo párrafo.

Tercer párrafo.

Vamos a ver en detalle cada una de las propiedades y funciones.

La propiedad ‘counter-increment’

La propiedad counter-increment sirve para indicar el nombre del contador. Con el selector de la regla CSS se debe apuntar al elemento HTML que se quiere contar. Por tanto, en el ejemplo anterior se apuntó a los párrafos (elementos <p>) que estuvieran dentro de un contenedor determinado.

Esta propiedad admite una lista de nombres de contadores separados por un espacio, y de forma opcional pueden ir acompañados de un valor numérico, positivo o negativo, que indica el incremento o la disminución del contador. Se puede especificar tantos contadores como sea necesario.

Por ejemplo, si se quiere indicar un incremento de 2 en 2 para el contador mi-contador, el valor de la propiedad counter-increment será mi-contador 2. Esto dará como resultado los valores 2, 4 y 6.

Código CSS:

.incrementa p {
  counter-increment: mi-contador 2;
}

.incrementa p::before {
  color: red;
  content: counter(mi-contador) ". –";
}

Resultado:

Primer párrafo.

Segundo párrafo.

Tercer párrafo.

La propiedad ‘counter-reset’

La propiedad counter-reset permite restablecer el contador para que no empiece con su valor por defecto (0) sino con otro valor deseado. Esta propiedad admite una lista de nombres de contadores separados por espacios, y de forma opcional pueden ir acompañados de un valor numérico de reinicio.

Con el selector de la regla CSS se debe apuntar al elemento HTML contenedor (padre) de los elementos que se quiere enumerar. Por tanto, en el siguiente ejemplo no se apunta a los párrafos sino a la clase decrece. Se propone poner el contador con el valor 100 y aplicar un decremento de -7 para cada elemento. Por lo tanto, como resultado, los valores serán 93, 86 y 79.

Código CSS:

.decrece {
  counter-reset: mi-contador 100;
}

.decrece p {
  counter-increment: mi-contador -7;
}

.decrece p::before {
  color: red;
  content: counter(mi-contador) ". –";
}

Resultado:

Primer párrafo.

Segundo párrafo.

Tercer párrafo.

La propiedad ‘counter-set’

La propiedad counter-set permite restablecer un contador a partir de un punto específico. Es por ello que esta propiedad se debe declarar sobre el elemento a partir del cual se quiere modificar la numeración del contador.

Esta propiedad también admite, al igual que las anteriores, una lista de contadores que pueden ir acompañados, de forma opcional, del valor de restablecimiento. Este valor será un número entero que puede ser positivo o negativo.

En el siguiente ejemplo se crea una regla CSS (clase reinicia) que restablece el elemento apuntado a 100. El contador existente empieza con 0 e incrementa de 20 en 20, por tanto los valores serán: 20, 100 y 120.

Código CSS:

.restablece {
  counter-reset: mi-contador;
}

.restablece p {
  counter-increment: mi-contador 20;
}

.restablece p::before {
  color: red;
  content: counter(mi-contador) ". –";
}

.reinicia {
  counter-set: mi-contador 100;
}

Resultado:

Primer párrafo.

Segundo párrafo.

Tercer párrafo.

La función ‘counter()’

La función counter() se usa como valor de la propiedad content para que el contador se visualice en el documento HTML mediante los pseudoelementos ::before y ::after. Esta función admite dos parámetros: el nombre del contador (obligatorio) y el tipo de contador que se debe usar (opcional).

Por defecto, el navegador web usa el tipo decimal. Los estilos permitidos son los mismos que los de la propiedad list-style-type para diseñar listas.

La función ‘counters()’

La función counters() realiza la misma función que la anterior, pero con la diferencia de que admite iteraciones dentro, como una lista HTML de varios niveles. También se usa como valor de la propiedad content, y lo que hace es mostrar los contadores anidados de forma concatenada. Por tanto, al igual que la anterior, se usa a través de los pseudoelementos ::before y ::after.

Esta función admite tres parámetros: el primero es obligatorio y se refiere al nombre del contador. El segundo parámetro es el separador de los múltiples contadores, y es opcional. Finalmente, el tercero también es opcional y se refiere al tipo de contador, siendo decimal el que se mostrará por defecto.

Código CSS:

.anidacion,
.anidacion li ul,
.anidacion li ul li ul {
  counter-reset: mi-contador;
}

.anidacion li {
  counter-increment: mi-contador;
  list-style-type: none;
}

.anidacion li::before {
  color: red;
  content: counters(mi-contador, ".") ". –";
}

Código HTML:

<ul class="anidacion">
  <li>Elemento</li>
  <li>Elemento
    <ul>
      <li>Elemento</li>
      <li>Elemento
        <ul>
          <li>Elemento</li>
          <li>Elemento</li>
        </ul>
      </li>
    </ul>
  </li>
</ul>

Resultado:

• Elemento
• Elemento
  • Elemento
  • Elemento
    • Elemento
    • Elemento