Propiedad CSS counter-reset

La propiedad counter-reset restablece uno o más contadores CSS a un valor determinado. Esta propiedad suele utilizarse junto con las propiedades content y counter-increment. La propiedad acepta un nombre de contador y un entero opcional, o la palabra clave none. none es el valor predeterminado. Se permiten valores negativos.

Valor inicial	none
Se aplica a	Todos los elementos.
Heredable	No.
Animable	No.
Versión	CSS2
Sintaxis DOM	object.style.counterReset = "section" ;

Sintaxis

Sintaxis de la propiedad CSS counter-reset

css

counter-reset: none | name number | initial | inherit;

Ejemplo de la propiedad counter-reset:

Ejemplo de la propiedad CSS counter-reset con el valor section

html

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      h2::before {
        counter-increment: section;
        content: "Book " counter(section) ". ";
      }
    </style>
  </head>
  <body>
    <p>Click the "Try it" button to set the counter-reset property:</p>
    <button onclick="myFunction()">Try it</button>
    <h2>HTML Tutorials</h2>
    <h2>JavaScript Tutorials</h2>
    <h2>CSS Tutorials</h2>
    <script>
      function myFunction() {
        document.body.style.counterReset = "section 5";
      }
    </script>
  </body>
</html>

Try it Yourself »

Ejemplo de la propiedad counter-reset con valor negativo:

Ejemplo de la propiedad counter-reset con el valor negativo:

html

<!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 -1;
        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>

Try it Yourself »

Ejemplo de la propiedad counter-reset con secciones y subsecciones numeradas:

Ejemplo de la propiedad counter-reset con secciones y subsecciones numeradas:

html

<!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>

Try it Yourself »

Valores

Valor	Descripción
none	Los contadores no se incrementan.
name number	Name define el nombre del contador que se va a restablecer. Number define el valor al que se restablecerá el contador en cada aparición del elemento. El valor predeterminado es 0 si no se especifica.
initial	Establece la propiedad en su valor predeterminado.
inherit	Hereda la propiedad de su elemento principal.

Práctica

¿Para qué se utiliza la propiedad CSS 'counter-reset'?

Se utiliza para evitar la recurrencia de un elemento.Crea o restablece contadores CSS en una lista o cualquier otro elemento.Estiliza el color de fondo de un elemento.Agrega una imagen o un degradado a un elemento HTML.Posiciona los elementos como 'fixed', 'relative' o 'absolute'.A menudo se utiliza junto con la propiedad 'counter-increment' y la propiedad 'content'.

Propiedad CSS counter-reset ​

Sintaxis ​

Ejemplo de la propiedad counter-reset: ​

Ejemplo de la propiedad counter-reset con valor negativo: ​

Ejemplo de la propiedad counter-reset con secciones y subsecciones numeradas: ​

Valores ​

Práctica ​

Propiedad CSS counter-reset

Sintaxis

Ejemplo de la propiedad counter-reset:

Ejemplo de la propiedad counter-reset con valor negativo:

Ejemplo de la propiedad counter-reset con secciones y subsecciones numeradas:

Valores

Práctica