Definición de .counter-reset aplicado en CSS
La propiedad .counter-reset
permite la numeración automática de elementos. Como una lista ordenada (
Ejemplo de empleo : propiedad CSS counter-reset
Esta propiedad de CSS se utiliza de esta forma:
article {
counter-reset: section;
}
section {
counter-increment: section;
}
section h2:before {
content: counter(section) '. ';
}
Otro ejemplo más avanzado de .counter-reset es el siguiente de CODEPEN:
Sintaxis de .counter-reset en CSS
counter-reset: none|name number|initial|inherit;
Valores
Valor | Descripción |
---|---|
ninguna | Valor por defecto. No se restablecerán los contadores |
número de identificación | El id define qué contador restablecer. El número establece el valor al que se restablece el contador en cada aparición del selector. El valor numérico predeterminado es 0 |
inicial | Establece esta propiedad en su valor predeterminado. |
heredar | Hereda esta propiedad de su elemento principal. |
Exploradores compatibles con .counter-reset
Los números de la tabla detallan la primera versión del navegador que es plenamente compatible con la propiedad.
Los números seguidos de -webkit- detallan la primera versión que funcionó con un prefijo.
Property | Chrome | Internet Explorer / Edge | Firefox | Safari | Opera |
---|---|---|---|---|---|
cursor | 5.0 | 5.5 | 4.0 | 5.0 | 9.6 |