Propiedad de contraincremento de CSS
Ejemplo
Cree un contador ("my-sec-counter") e increméntelo en uno por cada aparición del selector <h2>:
body {
/* Set "my-sec-counter" to 0 */
counter-reset: my-sec-counter;
}
h2::before {
/* Increment "my-sec-counter" by 1 */
counter-increment:
my-sec-counter;
content: "Section "
counter(my-sec-counter) ". ";
}
Más ejemplos de "Pruébelo usted mismo" a continuación.
Definición y uso
La counter-increment
propiedad aumenta o disminuye el valor de uno o más contadores CSS.
La counter-increment
propiedad se suele utilizar junto con la
propiedad de restablecimiento del contador y la
propiedad de contenido .
Valor por defecto: | ninguna |
---|---|
Heredado: | No |
Animable: | No. Leer sobre animable |
Versión: | CSS2 |
Sintaxis de JavaScript: | object .style.counterIncrement = "subsección"; |
Compatibilidad con navegador
Los números de la tabla especifican la primera versión del navegador que es totalmente compatible con la propiedad.
Property | |||||
---|---|---|---|---|---|
counter-increment | 4.0 | 8.0 | 2.0 | 3.1 | 9.6 |
Sintaxis CSS
counter-increment: none|id|initial|inherit;
Valores de propiedad
Value | Description |
---|---|
none | Default value. No counters will be incremented |
id number | The id defines which counter to increment. The number sets how much the counter will increment on each occurrence of the selector. The default increment is 1. Negative values are allowed. If id refers to a counter that has not been initialized by counter-reset, the default initial value is 0 |
initial | Sets this property to its default value. Read about initial |
inherit | Inherits this property from its parent element. Read about inherit |
Más ejemplos
Ejemplo
Cree un contador ("my-sec-counter") y disminúyalo en uno por cada aparición del selector <h2>:
body {
/* Set "my-sec-counter" to 0 */
counter-reset: my-sec-counter;
}
h2::before {
/* Decrement "my-sec-counter" by 1 */
counter-increment:
my-sec-counter -1;
content: "Section "
counter(my-sec-counter) ". ";
}
Ejemplo
Numeración de secciones y subsecciones con "Sección 1:", "1.1", "1.2", etc.:
body
{
/* Set "section" to 0 */
counter-reset: section;
}
h1
{
/* Set "subsection" to 0 */
counter-reset: subsection;
}
h1::before
{
/* Increment "section" by 1 */
counter-increment: section;
content: "Section " counter(section) ": ";
}
h2::before {
/* Increment "subsection" by 1 */
counter-increment: subsection;
content: counter(section) "." counter(subsection) " ";
}
Ejemplo
Cree un contador e increméntelo en uno (usando números romanos) para cada aparición del selector <h2>:
body {
/* Set "my-sec-counter" to 0 */
counter-reset: my-sec-counter;
}
h2::before {
/* Increment "my-sec-counter" by 1 */
counter-increment:
my-sec-counter;
content: counter(my-sec-counter,
upper-roman) ". ";
}
páginas relacionadas
Referencia CSS: :: antes del pseudo elemento
Referencia CSS: ::después del pseudo elemento
Referencia CSS: propiedad de contenido
Referencia de CSS: propiedad de restablecimiento de contador
Funciones CSS: función contador()
Referencia HTML DOM: propiedad counterIncrement