Share
¿Sabías que, con CSS, puedes crear un contador? Esto puede ser especialmente útil para los casos en que el recuento es puramente necesario para fines de presentación. Te mostraré cómo usar contra-incremento en este útil consejo rápido.
Es realmente muy simple. Ni siquiera estamos hablando de CSS3 aquí; la contra-incremento La propiedad ha estado alrededor por un tiempo ahora. Es solo que muchos de nosotros no estamos familiarizados con él, o no hemos encontrado un uso para ello..
Comenzamos aplicando el contra-incremento propiedad. Imaginemos que tenemos un conjunto de cuadros, y cada cuadro debe mostrar un número que corresponde al orden en que aparece el cuadro en su secuencia.
.box counter-increment: boxes;
los
contra-incrementoLa propiedad puede aceptar una o dos propiedades. El primero es uncarné de identidadque luego usarás para hacer referencia a este contador específico. También puede pasar un segundo parámetro que se refiere al incremento. Por ejemplo, en lugar de 1, 2, 3, 4, usted podría cambiar a 5, 10, 15, 20 aplicando:contra-incremento: cajas 5.
Este código ahora almacenará un número único para cada elemento que tiene un clase de caja. Pero, por supuesto, queremos obtener este número en la página. Con suerte, en algún momento en el futuro, podremos utilizar el contenido Propiedad dentro de los selectores estándar, pero todavía no del todo. En su lugar, usaremos pseudo elementos para aplicar el contenido..
.caja: después de contenido: contador (cajas);
Esto aplicará un número único, nuevamente, basado en el orden del elemento en la secuencia, a la .caja elemento. ¿Deberíamos restablecer este pedido de nuevo a 1 En algún momento, podríamos usarlo. contador de reinicio: cajas propiedad.
Ahora, todavía podrías estar pensando: "¿Por qué alguna vez usaría esto?" Hay muchas situaciones en las que podría ser útil. Por ejemplo, considere una sección de comentarios de un blog. Si quisieras proporcionar
un número para cada comentario en el conjunto, posiblemente un poco transparente, puede utilizar esta técnica. El número no es vital para el marcado, y solo se utiliza para la presentación. En estos casos, CSS.
contadores harán el truco muy bien!
Accentsconagua