Problema con selector de hijos (CSS)

Iniciado por eduardo(...)brutaldeath, 31 Agosto 2013, 21:50 PM

0 Miembros y 2 Visitantes están viendo este tema.

eduardo(...)brutaldeath

Hola a todos,
Iré al grano:
Miren el código de abajo.
Quiero dar estilo a la listas número 1 sin que se alteren las número 2.

Código (html4strict) [Seleccionar]

<UL>
        <LI>NUMERO 1
               <ul>
                       <li>NUMERO 2
                       </li>
               </ul>
        </LI>

        <LI>NUMERO 1
               <ul>
                       <li>NUMERO 2
                       </li>
               </ul>
        </LI>
</UL>


Además quiero alterarlas sin tener que colocar atributos a las etiquetas;
para eso usé este código css:

Código (css) [Seleccionar]

ul > li
{
color: red;
}


Se supone que en el código anterior estoy indicando que se altere a las etiquetas LI que sean hijas directas de UL; pero no funciona, cada vez que hago esto se pintan de rojo todas las listas... ¿Alguien tiene por favor una solución?

moikano→@

Hola

A ver si es correcta mi teoria.

Si te fijas todas tus LI son hijas directas de algún UL. Pon otras LI dentro de un UL y verás como la primera se pinta pero las otras no.

El único qu eno deberia alterarse es el LI segundo que contiene numero1.

eduardo(...)brutaldeath

Cita de: moikano→@ en 31 Agosto 2013, 22:37 PM
Hola

A ver si es correcta mi teoria.

Si te fijas todas tus LI son hijas directas de algún UL. Pon otras LI dentro de un UL y verás como la primera se pinta pero las otras no.

El único qu eno deberia alterarse es el LI segundo que contiene numero1.


De lo que se trata es de hacer que las listas NUMERO 1 se pinten de rojo y las NUMERO 2 (desplegables) ignoren dicha orden.  Sólo quiero saber si hay una forma correcta de hacerlo, sin trucos...



Almapa

Has probado con esto?

Código (css) [Seleccionar]
ul>li
{
background-color:red;
}
ul>li>ul>li
{
background-color:white;
}


A mi si que me ha funcionado...

Un saludo!

DaNuK

porque no lo haces asi
Código (css) [Seleccionar]

ul li:first-child
{
   //aqui tu estilo
}

Saludos

<a href ="http://programacionrapido.blogspot.com">Programacion .Net</a>

Roboto

Cita de: DaNuK en  1 Septiembre 2013, 17:48 PM
porque no lo haces asi
Código (css) [Seleccionar]

ul li:first-child
{
  //aqui tu estilo
}

Saludos

+1


ul li { background-color:red;}
ul li+li { background-color:white;}