La propiedad de incremento de contador CSS se utiliza para incrementar/disminuir el valor de un contador. Un contador CSS es una variable que se usa para rastrear cuántas veces se usa una variable.
Sintaxis:
counter-increment: none | identifier | initial | inherit;
Valor predeterminado: ninguno
Valores de propiedad:
ninguno: este es el valor predeterminado y por este no se incrementarán los contadores.
Sintaxis:
counter-increment: none;
Ejemplo:
html
<!DOCTYPE html>
<html>
<head>
<title>CSS counter-increment Property</title>
<style>
h1 {
color: green;
}
body {
}
<!-- The h2::before selector inserts something
before the content of each selected element -->
h2::before {
counter-increment: none;
}
</style>
</head>
<body>
<h1>Welcome to GeeksforGeeks</h1>
<h1>Courses: </h1>
<h2>Fork Python</h2>
<h2>Fork Java</h2>
<h2>Fork CPP</h2>
<h2>Sudo Gate</h2>
</body>
</html>
Producción:
identificador: El valor del identificador se utiliza para definir qué contador se debe incrementar. Este valor también toma un número que define cuánto se producirá el incremento. El valor predeterminado de este valor de incremento es 1 (si el selector no se ha reiniciado, el valor predeterminado será 0). Este valor también toma los valores negativos.
Sintaxis:
counter-increment: identifier;
Ejemplo:
html
<!DOCTYPE html>
<html>
<head>
<title>CSS counter-increment Property</title>
<style>
h1 {
color: green;
}
body {
<!-- Set "geek-counter" identifier to 0 -->
counter-reset: geek-counter;
}
<!-- The h2::before selector inserts something
before the content of each selected element -->
h2::before {
<!-- Increment "geek-counter" by 1 -->
counter-increment: geek-counter;
content: "Course " counter(geek-counter) ": ";
}
</style>
</head>
<body>
<h1>Welcome to GeeksforGeeks</h1>
<h1>Courses: </h1>
<h2>Fork Python</h2>
<h2>Fork Java</h2>
<h2>Fork CPP</h2>
<h2>Sudo Gate</h2>
</body>
</html>
Producción:
initial: este valor establece la propiedad en su valor predeterminado.
Sintaxis:
counter-increment: initial;
Ejemplo:
html
<!DOCTYPE html>
<html>
<head>
<style>
body {
/* Set "my-geek-counter" to 1*/
counter-reset: my-geek-counter 1;
}
h2::before {
/* Sets the initial value
which is 1 here for the counter */
counter-increment: initial;
content: "Section " counter(my-geek-counter) ". ";
}
}
</style>
</head>
<body>
<h1>Welcome to GeeksforGeeks</h1>
<h1>Courses: </h1>
<h2>Fork Python</h2>
<h2>Fork Java</h2>
<h2>Fork CPP</h2>
<h2>Sudo Gate</h2>
</body>
</html>
Producción:
heredar: este valor hereda esta propiedad de su elemento padre.
Sintaxis:
counter-increment: inherit;
Ejemplo:
html
<!DOCTYPE html>
<html>
<head>
<style>
body {
/* Set "my-geek-counter" to 1*/
counter-reset: my-geek-counter 1;
}
h2::before {
/* Sets the initial value
which is 1 here for the counter */
counter-increment: inherit;
content: "Section " counter(my-geek-counter) ". ";
}
}
</style>
</head>
<body>
<h1>Welcome to GeeksforGeeks</h1>
<h1>Courses: </h1>
<h2>Fork Python</h2>
<h2>Fork Java</h2>
<h2>Fork CPP</h2>
<h2>Sudo Gate</h2>
</body>
</html>
Producción:
Navegadores compatibles Los navegadores compatibles con la propiedad de contraincremento se enumeran a continuación:
- Google Chrome 2.0 y superior
- Borde 12.0 y superior
- Internet Explore 8.0 y superior
- Firefox 1.0 y superior
- Ópera 9.2 y superior
- Apple Safari 3.0 y superior