[SOLUCIONADO] Selector de hijos.

Iballa · #1 (**permalink**) 20/06/2013, 07:45

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:

Ver original<!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>

pitufoweb · #2 (**permalink**) 20/06/2013, 09:26

Cita:

Iniciado por Iballa

¿no se supone que el selector este: > es sólo para los hijos directos del contenedor?

Si. Ese es el selector de hijos.

Lo que pasa es que estas un poco confundido. Una cosa son los selectores descendientes y otra cosa es la herencia de CSS. Esta ultima es la que hace que los descendientes hereden propiedades de los ancestros.

Edito:
Pero el text-decoration no se tendría de heredar o si?

. Sera que aun estoy medio dormido que no veo donde esta el error?

Saludos

pzin · #3 (**permalink**) 20/06/2013, 09:56

Pero... Por defecto los enlaces salen subrayados, ¿no? No es que esté heredando de tu selector, es que tendrías que quitar primero el subrayado en general a los enlaces.

Código CSS:

Ver originala {
  text-decoration: none;
}

Vamos que heredando está, pero de los estilos por defecto del navegador.

Cita:

Iniciado por pitufoweb

Pero el text-decoration no se tendría de heredar o si?

Si se hereda ¿no? Si estás dormidito no publiques, que luego me haces dudar.

Iballa · #4 (**permalink**) 20/06/2013, 09:59

Cita:

Iniciado por pitufoweb

Si. Ese es el selector de hijos.

Lo que pasa es que estas un poco confundido. Una cosa son los selectores descendientes y otra cosa es la herencia de CSS. Esta ultima es la que hace que los descendientes hereden propiedades de los ancestros.

Edito:
Pero el text-decoration no se tendría de heredar o si?

. Sera que aun estoy medio dormido que no veo donde esta el error?

Saludos

Hola pitufoweb¡ el subrayado, el subrayado. Quiero que esté solo en el ul que pone AAAAAA, o sea, en las primeras li, o sea, en el menu principal...no en los submenus.

Quiero que quede algo asi AAAAAA AAAAAA AAAAAAA etc, pero que no me subraye el sub menu BBBBB y CCCCC.

Se supone que los submenus son los hijos del menú principal, o sea, si pongo ul>li sólo hago referencia al menu principal .,,... o no? dios mio, que me lio más todavia.

edito:pzin no habia leido tu post, es que no tengo ningún enlace, son sólo elementos <li>, no tienen porque estar subrayados...

pitufoweb · #5 (**permalink**) 20/06/2013, 10:12

Cita:

Iniciado por pzin

Pero... Por defecto los enlaces salen subrayados, ¿no? No es que esté heredando de tu selector, es que tendrías que quitar primero el subrayado en general a los enlaces.

Pero en ese ejemplo no hay enlaces así que no son los estilos del navegador.

Cita:

Iniciado por pzin

Si se hereda ¿no? Si estás dormidito no publiques, que luego me haces dudar.

Pero ahí dice que no se hereda http://www.w3.org/TR/css-text-decor-...ation-property

Saludos

pitufoweb · #6 (**permalink**) 20/06/2013, 10:17

Cita:

Iniciado por Iballa

Se supone que los submenus son los hijos del menú principal, o sea, si pongo ul>li sólo hago referencia al menu principal .,,... o no?

Si, entiendo. Es por la herencia de CSS como te dije en el mensaje anterior. Solo que no sabia que el text-decoration también se heredaba.

Osea, tu selector esta bien. Lo que causa que se propague a los descendientes es la herencia.

Saludos

pzin · #7 (**permalink**) 20/06/2013, 10:25

Pues no sé dónde vi yo enlaces.

Iballa · #8 (**permalink**) 20/06/2013, 10:28

Cita:

Iniciado por pitufoweb

Si, entiendo. Es por la herencia de CSS como te dije en el mensaje anterior. Solo que no sabia que el text-decoration también se heredaba.

Saludos

creí que no se heredaba, eso pone el w3, según pusistes antes no?...

pitufoweb · #9 (**permalink**) 20/06/2013, 10:30

Cita:

Iniciado por pzin

Pues no sé dónde vi yo enlaces.

Lo curioso es que no encuentro la forma de des-heredarlo.

Ni si quiera esto funciona: ul.menu li ul li {text-decoration:none !important;} Sera necesario llamar a algún abogado?

Saludos

pitufoweb · #10 (**permalink**) 20/06/2013, 10:35

Cita:

Iniciado por Iballa

creí que no se heredaba, eso pone el w3, según pusistes antes no?...

Si. Ahí dice que no se hereda, pero en todos los navegadores que he probado si lo hace.

Creo que hay un comportamiento extraño del text-decoration que no conozco. Por que incluso no puedo des-heredarlo.

Investigare un poco y te cuento.

Saludos

Iballa · #11 (**permalink**) 20/06/2013, 10:46

eso será cosa de santa rita, que dice que lo que se da no se quita...bueno, gracias¡¡ por lo menos dejo de darme cabezazos contra el teclado, yo también investigaré...

pitufoweb · #12 (**permalink**) 20/06/2013, 11:03

Bien,

Ya comprendo un poco ese comportamiento raro. http://www.w3.org/TR/css-text-decor-3/#line-decoration

Cita:

When specified on or propagated to a block container that establishes an inline formatting context, the decorations are propagated to an anonymous inline box that wraps all the in-flow inline-level children of the block container.

Es un poco complicado de explicar, pero a la ves es fácil de entender. Osea, el text-decoration se aplica a elementos en linea como a, span, "p", etc. Tu lo estas aplicando a un elemento de bloque por eso causa ese comportamiento raro.

Una ves que agregues los enlaces en el menu, ya no tendrás ese problema, pues los enlaces son elementos en linea y el text-decoration funcionara normal. Claro, siempre y cuando apliques el text-decoration a los enlaces y no los li.

Saludos

Iballa · #13 (**permalink**) 20/06/2013, 14:14

Waw, yo no lo habría encontrado...Muchas gracias¡¡