CSS
Contadores
Buscar..
Sintaxis
conjunto de contadores: [<nombre_contador> <integer>? ] + | ninguna
counter-reset: [<counter-name> <integer>? ] + | ninguna
contra-incremento: [<counter-name> <integer>? ] + | ninguna
contador (<counter-name> [, <counter-style>]?)
contadores (<counter-name>, <connector-string> [, <counter-style>]?)
Parámetros
| Parámetro | Detalles |
|---|---|
| nombre de contador | Este es el nombre del contador que debe crearse, incrementarse o imprimirse. Puede ser cualquier nombre personalizado que el desarrollador desee. |
| entero | Este número entero es un valor opcional que, cuando se proporciona junto al nombre del contador, representará el valor inicial del contador (en propiedades de counter-set counter-reset ) o el valor por el cual el contador debe incrementarse (en incremento de counter-increment ). |
| ninguna | Este es el valor inicial para las 3 propiedades de counter-* . Cuando este valor se utiliza para counter-increment de counter-increment , el valor de ninguno de los contadores se ve afectado. Cuando esto se usa para los otros dos, no se crea ningún contador. |
| contra-estilo | Esto especifica el estilo en el que se debe mostrar el valor del contador. Admite todos los valores admitidos por la propiedad de list-style-type . Si none se utiliza none , el valor del contador no se imprime en absoluto. |
| cuerda conectora | Esto representa la cadena que debe colocarse entre los valores de dos niveles de contador diferentes (como el "." En "2.1.1"). |
Observaciones
Los contadores no son un tema nuevo en CSS. Formaba parte de las Especificaciones de Nivel 2 de CSS (para ser más precisas, la Revisión 1) y por lo tanto tiene un soporte de navegador muy alto.
Todos los navegadores, excepto IE6 e IE7, son compatibles con los contadores de CSS.
Aplicando un estilo de números romanos a la salida del contador.
CSS
body {
counter-reset: item-counter;
}
.item {
counter-increment: item-counter;
}
.item:before {
content: counter(item-counter, upper-roman) ". "; /* by specifying the upper-roman as style the output would be in roman numbers */
}
HTML
<div class='item'>Item No: 1</div>
<div class='item'>Item No: 2</div>
<div class='item'>Item No: 3</div>
En el ejemplo anterior, la salida del contador se mostraría como I, II, III (números romanos) en lugar del habitual 1, 2, 3, ya que el desarrollador ha especificado explícitamente el estilo del contador.
Numera cada ítem usando el Contador CSS
CSS
body {
counter-reset: item-counter; /* create the counter */
}
.item {
counter-increment: item-counter; /* increment the counter every time an element with class "item" is encountered */
}
.item-header:before {
content: counter(item-counter) ". "; /* print the value of the counter before the header and append a "." to it */
}
/* just for demo */
.item {
border: 1px solid;
height: 100px;
margin-bottom: 10px;
}
.item-header {
border-bottom: 1px solid;
height: 40px;
line-height: 40px;
padding: 5px;
}
.item-content {
padding: 8px;
}
HTML
<div class='item'>
<div class='item-header'>Item 1 Header</div>
<div class='item-content'>Lorem Ipsum Dolor Sit Amet....</div>
</div>
<div class='item'>
<div class='item-header'>Item 2 Header</div>
<div class='item-content'>Lorem Ipsum Dolor Sit Amet....</div>
</div>
<div class='item'>
<div class='item-header'>Item 3 Header</div>
<div class='item-content'>Lorem Ipsum Dolor Sit Amet....</div>
</div>
El ejemplo anterior numera cada "elemento" en la página y agrega el número del elemento antes de su encabezado (usando la propiedad de content de .item-header element's :before pseudo). Una demostración en vivo de este código está disponible aquí .
Implementación de numeración multinivel utilizando contadores CSS.
CSS
ul {
list-style: none;
counter-reset: list-item-number; /* self nesting counter as name is same for all levels */
}
li {
counter-increment: list-item-number;
}
li:before {
content: counters(list-item-number, ".") " "; /* usage of counters() function means value of counters at all higher levels are combined before printing */
}
HTML
<ul>
<li>Level 1
<ul>
<li>Level 1.1
<ul>
<li>Level 1.1.1</li>
</ul>
</li>
</ul>
</li>
<li>Level 2
<ul>
<li>Level 2.1
<ul>
<li>Level 2.1.1</li>
<li>Level 2.1.2</li>
</ul>
</li>
</ul>
</li>
<li>Level 3</li>
</ul>
Lo anterior es un ejemplo de numeración multinivel utilizando contadores de CSS. Hace uso del concepto de auto-anidamiento de los contadores. Self nesting es un concepto en el que si un elemento ya tiene un contador con el nombre dado pero tiene que crear otro, lo crea como un elemento secundario del contador existente. Aquí, el segundo nivel ul ya hereda el contador de list-item-number de su padre, pero luego tiene que crear su propio list-item-number (para sus hijos li ) y así crea el list-item-number[1] (contador para segundo nivel) y lo anida bajo el list-item-number[0] (contador para el primer nivel). De este modo se consigue la numeración multinivel.
La salida se imprime utilizando la función counters() lugar de la función counter() porque la función counters() está diseñada para prefijar el valor de todos los contadores de nivel superior (padre) al imprimir la salida.