A veces tenemos que numerar los encabezados, párrafos, títulos de sección, botones, tarjetas y muchos otros elementos para los que las listas no son una etiqueta de elemento adecuada. En este escenario, podemos tomar la ayuda de los contadores CSS. No es una forma de reemplazar listas ordenadas o desordenadas en ningún sentido. Es solo que a veces las listas no son etiquetas apropiadas para usar. Podemos definir los contadores con nuestros propios nombres deseados. En este artículo, veremos cómo numerar los elementos HTML utilizando las propiedades CSS y sin utilizar la Lista.
Los contadores son solo variables mantenidas por CSS cuyos valores se pueden incrementar o disminuir. Para usar contadores, debe definirse e inicializarse usando la propiedad counter-name dentro de la clase principal del elemento en el que queremos usar contadores. Luego , la propiedad de incremento de contador se puede usar para incrementar el valor del contador.
Nota: No podemos mostrar la numeración en orden inverso ya que la función inversa solo es compatible con FIREFOX y no con otros navegadores, aunque los valores del contador se pueden disminuir.
Sintaxis:
body or parent element {
counter-reset: name; /* to initialize the counter */
}
element::after {
/* this is basically a condition met, like
in programing, to implement the counter action.*/
counter-increment: name number-of-count;
/* to increment the counter by the specified number of
count if no value is specified 1 is default */
content: "# " counter(name) ": "; /* to display the counter */
}
Acercarse:
- Primero, en el archivo HTML, agregue todas las secciones, botones y todas las demás cosas que desee numerar.
- Ahora agregue una clase a la sección exterior o div del elemento que desea numerar.
- Junto con el estilo apropiado, establezca el nombre deseado para su contador asignándolo a la propiedad de restablecimiento del contador , también puede hacer esto en el elemento del cuerpo.
- Use pseudo-elementos en la clase del elemento que desea numerar para activar la acción de incrementar el contador
- Si es necesario, puede mostrar la numeración aquí usando la propiedad de contenido .
Ejemplo 1: en este ejemplo, hacemos títulos numerados para que parezcan capítulos o lecciones siguiendo el enfoque mencionado anteriormente
HTML
<!DOCTYPE html>
<html>
<head>
<title>
Numbering the HTML elements
</title>
<style>
* > * {
margin: auto;
}
h1 {
width: max-content;
margin-top: 30px;
color: green;
}
h3,
p {
width: max-content;
}
.counter-section {
margin-top: 50px;
max-width: 800px;
counter-reset: section;
}
.counter-section > * {
padding: 5px;
}
.counter-section .section-title::before {
counter-increment: section;
content: counter(section) ": ";
}
</style>
</head>
<body>
<h1>GeeksforGeeks</h1>
<h3>
Numbering the HTML elements using CSS without Lists
</h3>
<div class="counter-section">
<h3 class="section-title">
This is a Geeks for Geeks heading
</h3>
<p>
Gain and share your knowledge & skills
with a variety of learning platforms
offered by GeeksforGeeks.
</p>
<p>
Gain and share your knowledge & skills
with a variety of learning platforms
offered by GeeksforGeeks.
</p>
<p>
Gain and share your knowledge & skills
with a variety of learning platforms
offered by GeeksforGeeks.
</p>
<h3 class="section-title">
This is another Geeks for Geeks heading
</h3>
<p>
Gain and share your knowledge & skills
with a variety of learning platforms
offered by GeeksforGeeks.
</p>
<p>
Gain and share your knowledge & skills
with a variety of learning platforms
offered by GeeksforGeeks.
</p>
<p>
Gain and share your knowledge & skills
with a variety of learning platforms
offered by GeeksforGeeks.
</p>
<h3 class="section-title">
This is another Geeks for Geeks heading
</h3>
<p>
Gain and share your knowledge & skills
with a variety of learning platforms
offered by GeeksforGeeks.
</p>
<p>
Gain and share your knowledge & skills
with a variety of learning platforms
offered by GeeksforGeeks.
</p>
<p>
Gain and share your knowledge & skills
with a variety of learning platforms
offered by GeeksforGeeks.
</p>
</div>
</body>
</html>
Producción:
Ejemplo 2: Este es otro ejemplo que ilustra la numeración de los elementos HTML sin listas, para hacer una lista de botones numerados.
HTML
<!DOCTYPE html>
<html>
<head>
<title>
Numbering the HTML elements
</title>
<style>
* > * {
margin: auto;
}
h1 {
width: max-content;
margin-top: 30px;
color: green;
}
h3 {
width: max-content;
}
p {
width: max-content;
}
.counter-section {
margin-top: 50px;
max-width: 800px;
counter-reset: section;
}
.counter-section > * {
padding: 5px;
}
.counter-section .section-button::before {
counter-increment: section;
content: "Step " counter(section);
}
</style>
</head>
<body>
<h1>GeeksforGeeks</h1>
<h3>
Numbering the HTML elements using CSS without Lists
</h3>
<div class="counter-section">
<button class="section-button"></button>
<p>
Gain and share your knowledge &
skills with a variety of learning
platforms offered by GeeksforGeeks.
</p>
<p>
Gain and share your knowledge &
skills with a variety of learning
platforms offered by GeeksforGeeks.
</p>
<p>
Gain and share your knowledge &
skills with a variety of learning
platforms offered by GeeksforGeeks.
</p>
<button class="section-button"></button>
<p>
Gain and share your knowledge &
skills with a variety of learning
platforms offered by GeeksforGeeks.
</p>
<p>
Gain and share your knowledge &
skills with a variety of learning
platforms offered by GeeksforGeeks.
</p>
<p>
Gain and share your knowledge &
skills with a variety of learning
platforms offered by GeeksforGeeks.
</p>
<button class="section-button"></button>
<p>
Gain and share your knowledge &
skills with a variety of learning
platforms offered by GeeksforGeeks.
</p>
<p>
Gain and share your knowledge &
skills with a variety of learning
platforms offered by GeeksforGeeks.
</p>
<p>
Gain and share your knowledge &
skills with a variety of learning
platforms offered by GeeksforGeeks.
</p>
</div>
</body>
</html>
Producción:
