Los contadores en CSS son básicamente variables que se pueden usar para numerar y los valores de los contadores CSS se pueden incrementar mediante reglas CSS. Siga el artículo, conocerá 2 métodos para revertir el contador personalizado usando CSS.
Usaremos los siguientes dos enfoques para invertir los contadores:
- En el enfoque 1, usaremos cómo invertir el contador simple usando la propiedad inversa en HTML.
- En el enfoque 2, finalmente resolveremos nuestro enunciado del problema sobre cómo revertir los contadores personalizados usando CSS .
Enfoque 1: Contador inverso usando atributo invertido en HTML.
En primer lugar, supondremos que conocemos el número total de elementos en la lista porque le indicaremos al contador que comience a numerar desde el número total de elementos y siga disminuyendo en uno hasta 0 (cero) y a través de esto podemos lograr el numeración en orden inverso.
Nota: El atributo HTML <ol> invertido es un atributo booleano y se utiliza para ordenar la lista en orden descendente (9, 8, 7, 6…..) en lugar de orden ascendente (1, 2, 3….).
Sintaxis:
<ol reversed> <li> Content... </li> <li> Content... </li> ... <li> Content... </li> </ol>
A continuación se muestra la implementación del enfoque anterior.
Ejemplo:
HTML
<!DOCTYPE html> <html> <body> <h1 style="color: green;"> GeeksforGeeks </h1> <p> Below list is numbered in Reverse order By using reverse property </p> <ol reversed> <li>Interview Preparation</li> <li>Content Writing</li> <li>SDE at GeeksforGeeks</li> </ol> </body> </html>
Producción:
El ejemplo anterior no es un contador personalizado. Es un método incorporado para invertir el contador. Siga el enfoque a continuación para personalizar el orden del contador.
Enfoque 2: usar un contador personalizado para invertir un contador. A continuación se muestra la implementación paso a paso sobre cómo usar el contador personalizado.
Paso 1: primero debe deshabilitar los contadores predeterminados para que no se muestre ningún marcador y esto se puede hacer configurando el tipo de estilo de lista de propiedad CSS en ninguno.
Paso 2: necesitamos crear un contador en CSS para realizar un seguimiento de la cantidad de elementos en la lista usando counter-reset, que crea o restablece un contador y establece counter-reset = (número total de elementos en la lista + 1). Agregar un elemento más se debe a la regla counter() .
counter-reset: myCounter (total number of element in the list + 1);
Paso 3 : use la función contador() en un contenido que se usa para mostrar el contenido en un orden particular.
content: counter(myCounter);
Paso 4: Por último, para incrementar el contador de CSS. Debe agregar la propiedad de incremento de contador que se usa para incrementar/disminuir el valor de un contador y establecer el incremento de contador = -1, que se usa para disminuir el contador en 1. En realidad, la propiedad de incremento de contador aumenta el número entero en 1, pero aquí modificaremos esta propiedad para disminuir el número entero en 1.
counter-increment: myCounter -1;
Ejemplo 2:
HTML
<!DOCTYPE html>
<html>
<head>
<style>
h1 {
color: green;
}
/* STEP-1 and STEP-2 */
ol {
/* Disable the default counters */
list-style-type: none;
/* Creates a counter */
counter-reset: myCounter 5;
}
/* STEP-3 and STEP-4 */
ol li::before {
/* To display the content in
a particular order. */
content: counter(myCounter) ".";
/* Decrease the counter by 1.*/
counter-increment: myCounter -1;
}
</style>
</head>
<body>
<h1>GeeksforGeeks</h1>
<p>
Below list is numbered in Reverse
order By Using Custom Counter.
</p>
<ol class="counter">
<li>Data Structure</li>
<li>Web Development</li>
<li>Competitive Programming</li>
<li>DBMS</li>
</ol>
</body>
</html>
Producción:
Publicación traducida automáticamente
Artículo escrito por aksrathod07 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA