Propiedad CSS counter-increment
La propiedad CSS counter-increment incrementa o decrementa el valor de los contadores. Vea ejemplos con los valores de la propiedad.
La propiedad counter-increment define en cuánto deben aumentar o disminuir los valores de los contadores. Esta propiedad se usa junto con las propiedades content y counter-reset.
La propiedad counter-increment se especifica mediante dos valores: none y números de id. "None" es el valor por defecto de esta propiedad. Permite usar valores negativos en el caso del valor "id number". El incremento por defecto es 1. Si el id del contador no se inicializa con counter-reset, el valor por defecto es 0. El valor del contador puede establecerse en un número arbitrario con la propiedad counter-reset.
| Valor inicial | none |
|---|---|
| Se aplica a | Todos los elementos. |
| Heredado | No. |
| Animatable | Discrete. |
| Versión | CSS2 |
| Sintaxis DOM | object.style.counterIncrement = "subsection"; |
Sintaxis
Sintaxis de la propiedad CSS counter-increment
counter-increment: none | id number | initial | inherit;Ejemplo de la propiedad counter-increment:
Ejemplo de la propiedad CSS counter-increment
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
body {
/* "my-counter" to 0 */
counter-reset: my-counter;
}
h2::before {
/* "my-counter" by 1 */
counter-increment: my-counter;
content: "Section " counter(my-counter) ". ";
}
</style>
</head>
<body>
<h2>HTML Tutorial</h2>
<h2>CSS Tutorial</h2>
<h2>JavaScript Tutorial</h2>
<h2>PHP Tutorial</h2>
</body>
</html>Resultado
Ejemplo de la propiedad counter-increment con secciones y subsecciones numeradas:
Propiedad CSS counter-increment con valor de subsección
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
body {
/* Set "section" to 0 */
counter-reset: section;
}
h2 {
/* Set "subsection" to 0 */
counter-reset: subsection;
}
h2::before {
counter-increment: section;
content: "Book " counter(section) ": ";
}
h3::before {
counter-increment: subsection;
content: counter(section) "." counter(subsection) " ";
}
</style>
</head>
<body>
<h2>HTML</h2>
<h3>HTML Basics</h3>
<h3>HTML Templates</h3>
<h3>HTML References</h3>
<h3>HTML Tags</h3>
<h2>CSS</h2>
<h3>CSS Basics</h3>
<h3>CSS References</h3>
<h3>CSS Advanced</h3>
<h3>CSS Guides</h3>
<h3>CSS Selectors</h3>
<h3>CSS Properties</h3>
</body>
</html>Ejemplo de la propiedad counter-increment con números romanos:
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
body {
/* "my-counter" to 0 */
counter-reset: my-counter;
}
h2::before {
/* "my-counter" by 1 */
counter-increment: my-counter;
content: counter(my-counter, upper-roman) ". ";
}
</style>
</head>
<body>
<h2>HTML Tutorial</h2>
<h2>CSS Tutorial</h2>
<h2>JavaScript Tutorial</h2>
<h2>PHP Tutorial</h2>
</body>
</html>Valores
| Valor | Descripción |
|---|---|
| none | Los contadores no se incrementan. Este es el valor por defecto. |
| id number | Id define qué contador incrementar. Number define en cuánto se incrementará el contador. |
| initial | Establece la propiedad en su valor por defecto. |
| inherit | Hereda la propiedad de su elemento padre. |