Foros del Web » Creando para Internet » CSS »

[SOLUCIONADO] Estilo en listas anidadas

Estas en el tema de Estilo en listas anidadas en el foro de CSS en Foros del Web. Hola a todos. Veamos tengo la siguiente lista. Una parte es ordenada y la otra parte no. @import url("http://static.forosdelweb.com/clientscript/vbulletin_css/geshi.css"); Código HTML: Ver original < ol ...
  #1 (permalink)  
Antiguo 12/11/2013, 05:44
 
Fecha de Ingreso: abril-2009
Ubicación: Barcelona
Mensajes: 113
Antigüedad: 15 años, 7 meses
Puntos: 9
Pregunta Estilo en listas anidadas

Hola a todos.

Veamos tengo la siguiente lista. Una parte es ordenada y la otra parte no.

Código HTML:
Ver original
  1. <ol>
  2.     <li>Lista ordenada</li>
  3.         <ul class="test">
  4.             <li>Lista no ordenada</li>
  5.             <li>Lista no ordenada</li>
  6.         </ul>
  7.     <li>Lista ordenada</li>
  8.     <li>Lista ordenada</li>
  9. </ol>

Tengo claro que en la parte de lista no ordenada puedo cambiar los colores del circulo con

Código CSS:
Ver original
  1. .test li:before{
  2.     color: #BB1B8D;
  3.     list-style-position:inside;
  4.     content: "•";  
  5. }

Ahora bien donde ya no lo tengo tan claro es como cambiar las propiedades de los números de la lista ordenada. Principalmente el tema del color.

¿Alguien sabe como hacerlo?
__________________
- Y lo que todavía me queda por aprender...
  #2 (permalink)  
Antiguo 12/11/2013, 07:24
Avatar de pzin
Moderata 😈
 
Fecha de Ingreso: julio-2002
Ubicación: Islas Canarias
Mensajes: 10.489
Antigüedad: 22 años, 4 meses
Puntos: 2114
Respuesta: Estilo en listas anidadas

El color lo cambias así:

Código CSS:
Ver original
  1. li {
  2.   color: red;
  3. }

Ahora si quieres un color diferente para el número que para el resto del elemento, ya es otra historia. Tendrías que quitar esos números, crear un contador y meterlos usando content:

Código CSS:
Ver original
  1. ol {
  2.   counter-reset: contador;
  3.   list-style: none;
  4. }
  5.  
  6. ol > li:before {
  7.   content: counter(contador);
  8.   counter-increment: contador;
  9.   color: red;
  10. }
  #3 (permalink)  
Antiguo 12/11/2013, 10:39
 
Fecha de Ingreso: abril-2009
Ubicación: Barcelona
Mensajes: 113
Antigüedad: 15 años, 7 meses
Puntos: 9
Respuesta: Estilo en listas anidadas

Muchas gracias pzin.

Lo curioso es que la parte del ol lo tenía como tu lo decias pero en vez de poner directamente el css como tu yo lo tenía para que primero mirase el class del div en el que esta todo... es decir algo así como

Código CSS:
Ver original
  1. .conjunto ol li:before{ /*instrucciones */}

Ha sido quitar el primer class y problema arreglado... no tengo muy claro porque pero a saber.

Gracias igualmente.
__________________
- Y lo que todavía me queda por aprender...

Etiquetas: anidadas, color, estilo, listas
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 22:17.