El uso de contadores de CSS
contadores de CSS son como "variables". Los valores de las variables se pueden incrementar por reglas CSS (que hará un seguimiento de la cantidad de veces que se utilizan).
Para trabajar con contadores de CSS usaremos las siguientes propiedades:
-
counter-reset- Crea o restablece un contador -
counter-increment- Incrementa un valor de contador -
content- Inserta contenido generado -
counter()ocounters()la función - agrega el valor de un contador a un elemento
Para utilizar un contador de CSS, primero se debe crear con counter-reset .
El siguiente ejemplo crea un contador de la página (en el selector de cuerpo), luego se incrementa el valor del contador para cada <h2> elemento y agrega "Section < value of the counter >:" al principio de cada <h2> elemento:
Ejemplo
body {
counter-reset: section;
}
h2::before {
counter-increment: section;
content: "Section " counter(section) ": ";
}
Inténtalo tú mismo " Contadores de anidación
En el siguiente ejemplo se crea una ficha de la página (sección) y un contador para cada <h1> elemento (subsección). La "section" contador se cuenta para cada <h1> elemento con "Section < value of the section counter >." , Y la "subsection" contador se cuentan para cada <h2> elemento con "< value of the section counter >.< value of the subsection counter >" :
Ejemplo
body {
counter-reset: section;
}
h1 {
counter-reset: subsection;
}
h1::before {
counter-increment:
section;
content: "Section " counter(section) ". ";
}
h2::before {
counter-increment: subsection;
content:
counter(section) "." counter(subsection) " ";
} Inténtalo tú mismo " Un contador también puede ser útil para hacer listas descritas porque una nueva instancia de un contador se crea automáticamente en elementos secundarios. Aquí utilizamos los counters() función para insertar una cadena entre los diferentes niveles de contadores anidados:
Ejemplo
ol {
counter-reset: section;
list-style-type: none;
}
li::before {
counter-increment: section;
content: counters(section,".") " ";
} Inténtalo tú mismo " Propiedades CSS del contador
| Propiedad | Descripción |
|---|---|
| content | Se utiliza con el :: antes y después :: pseudo-elementos, para insertar contenido generado |
| counter-increment | Incrementa uno o más valores de los contadores |
| counter-reset | Crea o restablece uno o más contadores |