Los contadores de CSS son "variables" mantenidas por CSS cuyos valores pueden incrementarse mediante reglas de CSS (para realizar un seguimiento de cuántas veces se utilizan). Los contadores le permiten ajustar la apariencia del contenido según su ubicación en el documento.
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
counter() or counters() function- Agrega el valor de un contador a un elemento.
Para utilizar un contador CSS, primero se debe crear 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 principio de cada elemento <h2>:
body {
counter-reset: section;
}
h2::before {
counter-increment: section;
content: "Section " counter(section) ": ";
}Pruébelo usted mismo →
<!DOCTYPE html>
<html>
<head>
<style>
body {
counter-reset: section;
}
h2::before {
counter-increment: section;
content: "Section " counter(section) ": ";
}
</style>
</head>
<body>
<h1>Using CSS Counters</h1>
<h2>HTML Tutorial</h2>
<h2>CSS Tutorial</h2>
<h2>JavaScript Tutorial</h2>
<h2>Python Tutorial</h2>
<h2>SQL Tutorial</h2>
</body>
</html>
El siguiente ejemplo crea un contador para la página (sección) y un contador para cada elemento <h1> (subsección). El contador de "sección" se contará para cada elemento <h1> con "Sección valor del contador de sección.", y el contador de "subsección" se contará para cada elemento <h2> con "<valor del contador de sección.valor del contador de subsección":
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) " ";
} Pruébelo usted mismo →
<!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 resumidas porque un nuevo La instancia de un contador se crea automáticamente en los elementos secundarios. Aquí utilizamos el Función counters() para insertar una cadena entre diferentes niveles de anidados contadores:
ol {
counter-reset: section;
list-style-type: none;
}
li::before {
counter-increment: section;
content: counters(section,".") " ";
} Pruébelo usted mismo →
<!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>
Se utiliza con los pseudoelementos ::before y ::after, para insertar contenido generado
Incrementa uno o más valores del contador.
Crea o restablece uno o más contadores
Devuelve el valor actual del contador nombrado.