La mayoría de los desarrolladores probablemente piensan en CSS como un medio para dar vida a los diseños, pero CSS3 es capaz de ir más allá de la estética. La propiedad de restablecimiento del contador de CSS3 se puede usar para asignar números cronológicos a ciertas secciones y subsecciones de su HTML, en las que puede usar ciertos elementos. Para este ejemplo, usaremos la propiedad para numerar el siguiente código:
1
2
3
4
<h1>Section 1</h1>
<h2>Sub-Section of Section 1</h2>
<h2>Sub-Section of Section 1</h2>
<h1>Section 2</h1>
Captura de pantalla 2016-07-18 a las 10.02.06 AM
Para usarlo, lo primero que debe hacer es definir dónde / cuándo se debe restablecer el contador:
1
2
3
body{
counter-reset: section;
}
Esto restablece el contador para comenzar desde cero. Puede agregar cualquier nombre como el valor de la propiedad de restablecimiento de contador y funcionará igual, solo asegúrese de aplicar ese nombre a la propiedad de incremento de contador más adelante si intenta usar la propiedad para numerar automáticamente sus elementos HTML.
Para numerar los elementos, necesitamos decirle al CSS que los incremente. Ya que vamos a estar numerando los elementos h1, nuestro CSS debería verse así:
1
2
3
4
h1:before{
counter-increment: section;
content: counter(section)'. ';
}
En el código anterior, básicamente le estamos diciendo a la CSS que comience a incrementar el contador de la sección para todos los elementos h1. Por lo tanto, el primer elemento h1 se numerará automáticamente como 1, el segundo será 2 y así sucesivamente. Para aplicar estos números a sus elementos correspondientes, usamos la propiedad de contenido con el valor 'contador (sección)', por lo que el valor siempre debe ser contador + el nombre que asignó a la propiedad de reinicio de contador inicial en su CSS (¡entre paréntesis! ).
En el ejemplo con el que estamos trabajando, también decidimos utilizar las subsecciones (los elementos h2), que se pueden numerar de manera similar. Primero, deberá comenzar un nuevo contador para las subsecciones:
1
2
3
h1{
counter-reset: subsection;
}
Para numerarlos, el código es más o menos lo mismo que numerar los elementos h1:
1
2
3
4
h2:before{
counter-increment: subsection;
content: counter(section)'.' counter(subsection)'- ';
}
Su producto final debe verse algo como esto:
Captura de pantalla 2016-07-18 a las 10.02.18 AM