selector > sólo para hijos del contenedor?

Citar

Escrito el 19 Jun 2013 04:27 pm

Hola, soy nueva en el foro, estoy aprendiendo html y css y tengo muchas dudas. Gracias por hacer este foro y que podamos exponerlas, aportaré lo que pueda.

mi duda es la siguiente, estoy haciendo un menu con submenus...el caso es que quiero subrayar solo los <li> del menú principal, y para eso le pongo el selector > en los estilos, para que directamente me subraye sólo los hijos del primer <ul>, pero me los subraya todos, ¿no se supone que el selector este: > es sólo para los hijos directos del contenedor? gracias

Aquí va el código:

Código HTML :

<!DOCTYPE HTML>
<html>
<head>
    <style type="text/css">
         ul > li {

            text-decoration: underline;
        }
   </style>
</head>

<body>

    <ul>
       <li>AAAAAAA</li>
       <li>AAAAAAA
            <ul>
                <li>BBBBB</li>
                <li>BBBBB</li>
                <li>BBBBB</li>
                <li>BBBBB</li>
       
             </ul>
       </li>
       <li>AAAAAAA</li>
       <li>AAAAAAA
                        
                     <ul>
                        <li>CCCC</li>
                        <li>CCCC</li>
                        <li>CCCC</li>
                        <li>CCCC</li>
       
                     </ul>


       </li>
       <li>AAAAAAA</li>
       <li>AAAAAAA
                                <ul>
                                    <li>DDD</li>
                                    <li>DDD</li>
                                    <li>DDD</li>
                                    <li>DDD</li>
       
                                </ul>
       </li>
       <li>AAAAAAA</li>
    </ul>

</body>
</html>

Por iballa

5 de clabLevel

Envíale un mensaje privado

Citar

Escrito el 19 Jun 2013 06:22 pm

Si te fijas al poner ul > li estas refiriendo a ambas listas, la principal y la del submenu...

Por otro lado, el "menu" es para dirigir a otras páginas, la estructura correcta es: ul > li > a

Dentro de li insertas la lista de submenú (lo tienes bien)

El formato del texto (como el subrayado) debes de aplicarlo al link "a"... que por default ya trae uno.

Para no complicarte crea una clase para los submenus y quita el subrayado de los links de dicha clase...

Algo como:

Código CSS :

ul.submenu a{text-decoration:none;}

Código HTML :

<ul>
  <li><a href="/">Bt 1</a></li>
  <li><a href="/">Bt 2</a>
    <ul class="submenu">
       <li><a href="/">Bt 2.1</a></li>
       <li><a href="/">Bt 2.2</a></li>
    </ul>
  </li>
</ul>

***Si quieres hacerlo como tu lo tienes, con una clase (o id..) al ul principal:

Código CSS :

ul.menu > li

Con eso se arreglará

Por nasho

Claber

908 de clabLevel

1 tutorial

Genero:Masculino

Envíale un mensaje privado

Web Developer

Citar

Escrito el 19 Jun 2013 07:29 pm

Muchas gracias por la respuesta tan detallada. Estoy de acuerdo en todo. Aun así me gustaria probar a que me salga bien tal y como lo estoy haciendo, simplemente por practicar. Pongo tu ultima sugerencia, la de la clase .menu, pero aún así no me sale...no se por qué¡¡ que sigo haciendo mal?

El codigo siguiente es el mismo de antes, pero con la variación que me sugeristes:

Código HTML :

<!DOCTYPE HTML>
<html>
<head>
    <style type="text/css">
         ul.menu > li {
            text-decoration: underline;
        }
   </style>
</head>

<body>

    <ul class="menu">
       <li>AAAAAAA</li>
       <li>AAAAAAA
            <ul>
                <li>BBBBB</li>
                <li>BBBBB</li>
                <li>BBBBB</li>
                <li>BBBBB</li>
       
             </ul>
       </li>
       <li>AAAAAAA</li>
       <li>AAAAAAA
                        
                     <ul>
                        <li>CCCC</li>
                        <li>CCCC</li>
                        <li>CCCC</li>
                        <li>CCCC</li>
       
                     </ul>


       </li>
       <li>AAAAAAA</li>
       <li>AAAAAAA
                                <ul>
                                    <li>DDD</li>
                                    <li>DDD</li>
                                    <li>DDD</li>
                                    <li>DDD</li>
       
                                </ul>
       </li>
       <li>AAAAAAA</li>
    </ul>

</body>
</html>

Por iballa

5 de clabLevel

Envíale un mensaje privado

Citar

Escrito el 19 Jun 2013 08:15 pm

.... eso es muy raro.

Debería de estar bien.

Creo que con el subrayado hay un problema

.... li abarca toda la sublista, por lo que está subrayando todo el li (incluyendo esa sublista)

Abría que decirle que no quieres que sea todo el li, sino solo el texto..

Código CSS :

ul.menu1 > li > span{text-decoration:underline;}

Código HTML :

<ul class="menu1">
    <li><span>1</span></li>
    <li><span>2</span>
        <ul class="menu2">
            <li><span>2.1</span></li>
        </ul>
    </li>
</ul>

.... cosas raras

Por nasho

Claber

908 de clabLevel

1 tutorial

Genero:Masculino

Envíale un mensaje privado

Web Developer

Citar

Escrito el 19 Jun 2013 08:32 pm

Ahora si¡ Muchas gracias Nasho¡

Por iballa

5 de clabLevel

Envíale un mensaje privado

selector > sólo para hijos del contenedor?

Escribe una respuesta rapida