SummArg | Cursos y recursos para webmasters

04/07/2011

Perfeccionar las listas ordenadas en CSS

En 1stwebdesigner.com explican mediante una guía el uso de contadores dentro de las listas ordenadas en CSS. Las propiedades counter-reset y counter-increment son muy poco utilizadas y se las rescata del anonimato para lograr numerar correctamente los elementos dentro de estas listas ordenadas que en vez de utilizar etiqueta <ol> utilizará headings para indicar el inicio de cada lista y sus items.

Les dejamos un código comentado de ejemplo y la imagen ilustrativa del mismo.
body {
counter-reset: first; /* coloca en cero el contador de h1 */
}
h1 {
counter-increment: first; /* cuando tengamos un h1, nuestro contador se incrementa un punto */
counter-reset: second; /* y ponemos en cero el contador h2 */
}
h1:before { /* Damos formato especial al paso 1 (step) */
content: "Step " counter(first) " - "; /* Esto añade la palabra "Step" y el número de que h1 tenga en el contador */
font-size: 0.8em;
font-weight: normal;
font-style: italic;
color: #bababa;
}
h2 {
counter-increment: second; /* suma un punto a h2 */
counter-reset: third; /* resetea h3 */
}
h2:before {
content: counter(first) "." counter(second) " - "; /* imprime H1NUMBER.H2NUMBER para numerar los puntos con el numero de paso y numero de item, ej. 1.1, 1.2, 1.3, etc.  */
}
h3 {
counter-increment: third; /* suma un punto a h3 */
}
h3:before {
content: counter(first) "." counter(second) "." counter(third) " - "; /* Imprime H1.H2.H3, o sea 1.1.1, 1.1.2, 1.1.3, etc */
}

 

Demo | Descarga

body {

2 counter-reset: first; /* our h1's counter is zero every time we have a body tag (hope only once) */
3}
4h1 {
5 counter-increment: first; /* so, when we have one h1, our counter will increase one unit */
6 counter-reset: second; /* and we will reset our h2's counter */
7}
8h1:before { /* wow, here we will append a pretty formated Step N - Item */
9 content: "Step " counter(first) " - "; /* when you write counter(first) we will get its current value */
10 font-size: 0.8em;
11 font-weight: normal;
12 font-style: italic;
13 color: #bababa;
14}
15h2 {
16 counter-increment: second; /* so our h2's counter goes up.. */
17 counter-reset: third; /* and we reset the h3's */
18}
19h2:before {
20 content: counter(first) "." counter(second) " - "; /* we will output H1NUMBER.H2NUMBER */
21}
22h3 {
23 counter-increment: third; /* h3 goes up, up, up */
24}
25h3:before {
26 content: counter(first) "." counter(second) "." counter(third) " - "; /* and we output H1.H2.H3 */
27}

Dejar un comentario