Contador de CSS

Pizza

Hamburguesa

Hotdogs

Los contadores CSS son "variables" mantenidas por CSS, cuyos valores se pueden incrementar mediante reglas CSS (para rastrear su uso).

Los contadores le permiten ajustar el aspecto en función de la posición del contenido en el documento.

Números con contadores

Los contadores CSS actúan como "variables" Las variables se pueden incrementar mediante reglas CSS (para rastrear su uso).

Para usar los contadores CSS, utilizaremos las siguientes propiedades:

  • counter-reset - crear o restablecer el contador
  • counter-increment - incrementar el valor del contador
  • content - insertar el contenido generado
  • counter() o counters() función - agregar el valor del contador al elemento

Para usar los contadores CSS, primero debes usar counter-reset Crea uno.

El siguiente ejemplo crea un contador para la página (en el selector body) y luego aumenta el valor del contador para cada elemento <h2>, añadiendo al principio de cada <h2> "Sección <valor del contador>:"

Ejemplo

body {
  counter-reset: section;
}
h2::before {
  counter-increment: section;
  content: "Sección " counter(section) ": ";
}

Prueba personal

Contadores anidados

El siguiente ejemplo crea un contador para la página (section) y un contador para cada elemento <h1> (subsection).

"section" el contador cuenta para cada elemento <h1>, escribiendo al mismo tiempo "Sección" y el valor del contador de section, "subsection" el contador cuenta para cada elemento <h2>, escribiendo el valor del contador de section y el valor del contador de subsection:

Ejemplo

body {
  counter-reset: section;
}
h1 {
  counter-reset: subsection;
}
h1::before {
  counter-increment: section;
  content: "Sección " counter(section) ". ";
}
h2::before {
  counter-increment: subsection;
  content: counter(section) "." counter(subsection) " ";
}

Prueba personal

Los contadores también son útiles para crear listas de resumen, ya que se crea automáticamente una nueva instancia del contador en los elementos secundarios. Aquí, usamos counters() La función inserta una cadena entre los contadores de nivel diferente:

Ejemplo

ol {
  counter-reset: section;
  list-style-type: none;
}
li::before {
  counter-increment: section;
  content: counters(section,".") " ";
}

Prueba personal

Atributos de contador CSS

Atributo Descripción
content Usar con los elementos pseudo ::before y ::after para insertar contenido generado.
counter-increment Incrementar el valor de uno o más contadores.
counter-reset Crear o restablecer uno o más contadores.