Los contadores CSS son "variables" mantenidas por CSS cuyos valores pueden incrementarse mediante reglas de CSS (para rastrear cuántas veces se usan). Los contadores te permiten ajustar la apariencia del contenido según su ubicación en el documento.

Numeración automática con contadores

Los contadores CSS son como "variables". Los valores de las variables se pueden incrementar mediante reglas CSS (que rastrearán cuántas veces se usan).

Para trabajar con contadores CSS usaremos las siguientes propiedades:

  • counter-reset: Crea o restablece un contador
  • counter-increment: Incrementa un valor de contador
  • content: Inserta contenido generado
  • función counter() o counters(): Agrega el valor de un contador a un elemento

Para usar un contador CSS, primero debe crearse con counter-reset. El siguiente ejemplo crea un contador para la página (en el selector de cuerpo), luego incrementa el valor del contador para cada elemento <h2> y agrega "Sección <valor del contador>:" al comienzo de cada elemento <h2>.

Ejm

<!DOCTYPE html>
<html>
<head>
<style>
body {
counter-reset: section;
}

h2::before {
counter-increment: section;
content: "Section " counter(section) ": ";
}
</style>
</head>
<body>

<h1>Usando contadores CSS</h1>

<h2>HTML Tutorial</h2>
<h2>CSS Tutorial</h2>
<h2>JavaScript Tutorial</h2>
<h2>Python Tutorial</h2>
<h2>SQL Tutorial</h2>

</body>
</html>

Contadores de anidamiento

El siguiente ejemplo crea un contador para la página (section) y un contador para cada elemento <h1> (subsection). El contador de "section" se contará para cada elemento <h1> con "Section<valor del contador de sección>.", y el contador de "subsection" se contará para cada elemento <h2> con "<valor del contador de sección >.<valor del contador de subsecciones>".

Ejm

<!DOCTYPE html>
<html>
<head>
<style>
body {
counter-reset: section;
}

h1 {
counter-reset: subsection;
}

h1::before {
counter-increment: section;
content: "Section " counter(section) ". ";
}

h2::before {
counter-increment: subsection;
content: counter(section) "." counter(subsection) " ";
}
</style>
</head>
<body>


<h1>HTML/CSS Tutorials</h1>
<h2>HTML</h2>
<h2>CSS</h2>
<h2>Bootstrap</h2>
<h2>W3.CSS</h2>

<h1>Scripting Tutorials</h1>
<h2>JavaScript</h2>
<h2>jQuery</h2>
<h2>React</h2>

<h1>Programming Tutorials</h1>
<h2>Python</h2>
<h2>Java</h2>
<h2>C++</h2>

</body>
</html>

Un contador también puede ser útil para hacer listas delineadas porque una nueva instancia de un contador se crea automáticamente en los elementos secundarios. Aquí usamos la función counters() para insertar una cadena entre diferentes niveles de contadores anidados:

Ejm

<!DOCTYPE html>
<html>
<head>
<style>
ol {
counter-reset: section;
list-style-type: none;
}

li::before {
counter-increment: section;
content: counters(section,".") " ";
}
</style>
</head>
<body>

<ol>
<li>item</li>
<li>item 
<ol>
<li>item</li>
<li>item</li>
<li>item
<ol>
<li>item</li>
<li>item</li>
<li>item</li>
</ol>
</li>
<li>item</li>
</ol>
</li>
<li>item</li>
<li>item</li>
</ol>

<ol>
<li>item</li>
<li>item</li>
</ol>

</body>
</html>

Resumen

Propiedad Descripción
content Usado con los pseudo-elementos ::before y ::after, para insertar contenido generado
counter-increment Incrementa uno o más valores de contador
counter-reset Crea o restablece uno o más contadores
counter() Devuelve el valor actual del contador nombrado