Contadores CSS
Pizza
Hamburguesa
perritos calientes
Los contadores de CSS son "variables" mantenidas por CSS cuyos valores pueden incrementarse mediante reglas de CSS (para rastrear cuántas veces se usan). Los contadores le permiten ajustar la apariencia del contenido según su ubicación en el documento.
Numeración automática con contadores
Los contadores CSS son como "variables". Los valores de las variables se pueden incrementar mediante reglas CSS (que rastrearán cuántas veces se usan).
Para trabajar con contadores CSS usaremos las siguientes propiedades:
counter-reset- Crea o reinicia un contadorcounter-increment- Incrementa un valor de contadorcontent- Inserta contenido generadocounter()ocounters()función - Agrega el valor de un contador a un elemento
Para usar un contador CSS, primero debe crearse con counter-reset.
El siguiente ejemplo crea un contador para la página (en el selector de cuerpo), luego incrementa el valor del contador para cada elemento <h2> y agrega "Sección < valor del contador >:" al comienzo de cada elemento <h2>:
Ejemplo
body {
counter-reset: section;
}
h2::before {
counter-increment: section;
content: "Section " counter(section) ": ";
}
Contadores de anidamiento
El siguiente ejemplo crea un contador para la página (sección) y un contador para cada elemento <h1> (subsección). El contador de "sección" se contará para cada elemento <h1> con "Sección < valor del contador de sección >.", y el contador de "subsección" se contará para cada elemento <h2> con "< valor del contador de sección >.< valor del contador de subsecciones >":
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) " ";
}
Un contador también puede ser útil para hacer listas delineadas porque una nueva instancia de un contador se crea automáticamente en los elementos secundarios. Aquí usamos la
counters()función para insertar una cadena entre diferentes niveles de contadores anidados:
Ejemplo
ol {
counter-reset: section;
list-style-type: none;
}
li::before {
counter-increment: section;
content: counters(section,".") " ";
}
Propiedades del contador CSS
| Property | Description |
|---|---|
| content | Used with the ::before and ::after pseudo-elements, to insert generated content |
| counter-increment | Increments one or more counter values |
| counter-reset | Creates or resets one or more counters |
| counter() | Returns the current value of the named counter |