Outbook

HTML+CSS+JS, Accesibilidad, PHP y más

Inicio que contiene a Desarrollo web que contiene a CSS que contiene a Listas ordenadas: cambiar estilos de la numeración

Datos de búsqueda

Listas ordenadas: cambiar estilos de la numeración

A los elementos de lista se les pueden añadir por CSS bullets, números, letras, etc. que les precedan cuando son visualizados en el navegador, mediante la propiedad ‘list-style’, o bien asignarles una imagen de fondo mediante la propiedad ‘background’.

Cuando se trata de listas ordenadas lo habitual es utilizar números:

ol li {list-style:decimal;}

Los números de la lista ordenada llevarán el mismo estilo que el elemento LI. Pero puede ocurrir que se quiera que los números tengan un estilo distinto, por ejemplo que, a diferencia del texto, vayan en negrita:

Lista ordenada con números en negrita

En este caso habría que complicar el HTML:

<li><span>[Texto]</span></li>

Y aplicar los estilos del siguiente modo:

ol li {font-weight:bold;} ol li span {font-weight:normal;}

Si es un HTML generado por servidor, no hay problema. Pero, ¿y si se trata de HTML introducido mediante publicación de contenidos? Será más difícil de introducir.

Existe otra alternativa, sin complicar el HTML:

<li>[Texto]</li>

Y en CSS:

ol {counter-reset: item; padding-left:20px;} ol li {list-style-type:none;} ol li:before {content: counter(item) ". "; counter-increment: item; margin-left:-16px; font-weight:bold;}

Lo que se ha hecho es:

  • Introducir un contador ‘item’ (se puede nombrar como se quiera) que se resetea al comenzar el elemento OL.
  • Eliminar los estilos de lista en el LI.
  • Uso del pseudo-elemento ‘before’ en el LI para introducir los números con el formato deseado (incrementando el valor del número para el siguiente LI dentro de un mismo OL).
  • Hay un ‘padding’ y un ‘margin’. Esto habrá que ajustarlo (o quitarlo) según sea necesario en cada caso.

Problema: en Internet Explorer 7 y anteriores no funciona, con el estilo anteriormente expuesto no saldrían los números asociados a los elementos. Habría que cambiar un poco el estilo:

ol {padding-left:20px;} html>/**/body ol {counter-reset: item; } ol li {list-style-type:decimal;} html>/**/body ol li {list-style-type:none;} ol li:before {content: counter(item) ". "; counter-increment: item; margin-left:-16px; font-weight:bold;}

En IE7 y anteriores la lista se verá sin las negritas en los números, y en IE8 y superiores, y el resto de navegadores, se verán los números en negrita.

Saber más

Comentarios del artículo

Los comentarios están cerrados.

Si el comentario no guarda relación con el tema del artículo o los comentarios previos, si la redacción del mismo es ilegible (estilo HOYGAN), o si contiene insultos u otros términos ofensivos, será borrado de inmediato. No se garantiza ningún soporte a los ejemplos de desarrollo web presentados en este sitio.

Todavía no hay comentarios.

Los comentarios están cerrados.

Información del sitio