La propiedad de restablecimiento de contador en CSS se usa para crear o restablecer el contador de CSS para elementos. Esta propiedad funciona junto con la propiedad de contraincremento y la propiedad de contenido.
Sintaxis:
counter-reset = none|name number|initial|inherit;
Valor por defecto:
- ninguna
Valores de propiedad:
- none: Es el valor por defecto. Este valor no reinicia el contador.
- número de nombre: el valor para restablecer el contador en cada aparición del elemento. El valor predeterminado es 0 si no se especifica.
- initial: Establece la propiedad counter-reset a su valor por defecto.
- heredar: el elemento hereda la propiedad de su elemento padre.
Ejemplo 1: este ejemplo utiliza la propiedad de restablecimiento del contador para crear una sección.
html
<!DOCTYPE html>
<html>
<head>
<!-- CSS property to set counter-reset property -->
<style>
/* set chapter counter to 0*/
body {
counter-reset: chapter;
}
.chapter:before {
content: counter(chapter) ". ";
display: inline;
}
.chapter {
/* Increment the chapter counter by 1,
same as counter-increment: chapter 1; */
counter-increment: chapter;
/* set section counter to 0 */
counter-reset: section;
font-size: 20px;
font-weight: bold;
}
</style>
</head>
<body>
<h1>GeeksforGeeks</h1>
<div class = "chapter">HTML</div>
<div class = "chapter">CSS</div>
<div class = "chapter">PHP</div>
</body>
</html>
Producción:
Ejemplo 2: este ejemplo utiliza la propiedad de restablecimiento del contador para crear una sección y una subsección.
html
<!DOCTYPE html>
<html>
<head>
<!-- CSS style to create counter-reset property -->
<style>
body {
counter-reset: section;
}
h1 {
counter-reset: category;
}
h1:before {
counter-increment: section;
content: "Section " counter(section) ". ";
}
h3:before {
counter-increment: category;
content: counter(section) "." counter(category) " ";
}
</style>
</head>
<body>
<h1>GeeksforGeeks</h1>
<h3>HTML</h3>
<h3>CSS </h3>
<h1>References</h1>
<h3>HTML Tags</h3>
<h3>CSS Properties</h3>
</body>
</html>
Producción:
Navegadores compatibles: los navegadores compatibles con la propiedad de restablecimiento de contador se enumeran a continuación:
- Google Chrome 2.0
- Borde 12.0
- Internet Explorer 8.0
- Firefox 1.0
- Safari 3.0
- Ópera 9.2
Publicación traducida automáticamente
Artículo escrito por ChinkitManchanda y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA