Propiedad de restablecimiento de contador 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-reset
propiedad crea o restablece uno o más contadores CSS.
La counter-reset
propiedad se suele utilizar junto con la
propiedad
de incremento de contador y la propiedad de contenido .
Valor por defecto: | ninguna |
---|---|
Heredado: | No |
Animable: | No. Leer sobre animable |
Versión: | CSS2 |
Sintaxis de JavaScript: | objeto .style.counterReset="secció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-reset | 4.0 | 8.0 | 2.0 | 3.1 | 9.6 |
Sintaxis CSS
counter-reset: none|name number|initial|inherit;
Valores de propiedad
Value | Description |
---|---|
none | Default value. No counters will be reset |
id number | The id defines which counter to reset. The number sets the value the counter is reset to on each occurrence of the selector. The default number 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 contraincremento
Funciones CSS: función contador()
Referencia HTML DOM: propiedad counterReset