Atributo counter-set de CSS

página anterior counter-reset
página siguiente @counter-style

Definición y uso

counter-set La propiedad se utiliza para crear y establecer el valor específico del contador CSS.

counter-set Las propiedades se utilizan generalmente junto con la propiedad counter-increment y la propiedad content.

Ejemplo

Ejemplo 1

Crear un contador ("my-counter"), establecerlo en 5 y aumentarle 1 cada vez que aparezca el selector <h2>:

body {
  /* Establecer "my-counter" en 5 */
  counter-set: my-counter 5;
}
h2::before {
  /* Aumenta "my-counter" en 1 */
  counter-increment: my-counter;
  content: "Section " counter(my-counter) ". ";
}

Pruebe usted mismo

Ejemplo 2

Crear un contador ("my-counter"), establecerlo en 5 y reducirlo 1 cada vez que aparezca el selector <h2>:

body {
  /* Establecer "my-counter" en 5 */
  counter-set: my-counter 5;
}
h2::before {
  /* Reducir "my-counter" en 1 */
  counter-increment: my-counter -1;
  content: "Section " counter(my-counter) ". ";
}

Pruebe usted mismo

Ejemplo 3

Usar los formatos "Section 10:"、"10.1"、"10.2" para numerar secciones y subsecciones:

body {
  /* Establecer "section" en 9 */
  counter-set: section 9;
}
h1 {
  /* Establece "subsection" en 0 */
  counter-set: subsection 0;
}
h1::before {
  /* Aumenta "section" en 1 */
  counter-increment: section;
  content: "Sección " counter(section) ": ";
}
h2::before {
  /* Aumenta "subsection" en 1 */
  counter-increment: subsection;
  content: counter(section) "." counter(subsection) " ";
}

Pruebe usted mismo

Ejemplo 4

Cree un contador, establezca 9 y aumente 1 cada vez que se encuentre el selector <h2> (usando números romanos):

body {
  /* Establece "my-counter" en 9 */
  counter-set: my-counter 9;
}
h2::before {
  /* Aumenta "my-counter" en 1 */
  counter-increment: my-counter;
  content: counter(my-counter, upper-roman) ". ";
}

Pruebe usted mismo

Sintaxis de CSS

counter-set: none|counter-name número|initial|inherit;

Valor del atributo

Valor	Descripción
none	Valor predeterminado. No configure el contador.
counter-name número	El nombre del contador a establecer y su valor. El contador se establecerá en este valor cada vez que se encuentre el selector. El valor predeterminado es 0.
initial	Establezca este atributo en su valor predeterminado. Véase initial.
inherit	Hereda este atributo de su elemento padre. Véase inherit.

Valor predeterminado:	none
Herencia:	No
Producción de animación:	No se admite. Consulte:Atributos relacionados con la animación.
Versión:	CSS2
Sintaxis de JavaScript:	object.style.counterSet="4"