2012-08-31 9 views
6

estoy usando el siguiente CSS para mostrar un contador de pasos:¿Es posible mostrar la cantidad total de elementos en la propiedad css del contenido?

:before { 
    content: "step " counter(fieldsets); 
    counter-increment: fieldsets; 
    /* Some more css */ 
} 

Pero estaba preguntado si era posible visualizar el número total de elementos, así, de este modo:

:before { 
    content: "step " counter(fieldsets) " of " total_number_of_fieldsets; 
    counter-increment: fieldsets 
    /* Some more css */ 
} 

Me encantaría que fuera una solución de CSS pura, ¿es posible?

Respuesta

1

A menos que tenga algo más que calcule el total_number_of_fieldsets contar en el CSS, no es posible.

Ver este violín: http://jsfiddle.net/EawLA/

le puede mostrar al total: después

Tenga en cuenta que esto no funcionará en IE < 9 como pseudo elementos no son compatibles

+0

Soy consciente de la poca compatibilidad con versiones anteriores de esto, y creo que esta solución no es muy bonita, pero hace lo que yo quiero que haga, ¡gracias! –

+0

Funciona en IE8, y IE siempre ha admitido como mínimo 'pseudoelementos': first-line' y ': first-letter'. Simplemente no comenzó a admitir ': before' y': after' hasta IE8 + y otros en IE9/10. – BoltClock

0

CSS no puede inspeccionar el DOM ni usar variables, por lo tanto no puede extraer esta inforamción.

+1

Eso no es realmente verdad hoy, ya puede utilizar contadores ahora, y también es posible hacer 'content: 'step' counter (fieldsets) 'de' attr (data-total-steps);' utilizando un atributo de datos personalizado. –

+0

Gracias Jasper, toda la documentación dice sobre el uso de '" contenido: "Página" contador (página) "de" contador (páginas) "' pero no he logrado que funcione. No consideré usar datos attr. gracias – TarranJones

Cuestiones relacionadas