Para que sirve el caracter >

[rogeliomx]

Para que sirve ul > li > a:hover

Estoy viendo que algunas clases de CSS las declaran con >, para que sirve eso, yo declaro las clases con ul li a:hover, que diferencia hay entre hacerlo de una forma u otra??

Forma:
ul > li > a:hover VS ul li a:hover

[ipraetoriux]

Pues son selectores de CSS. En este caso, este selector selecciona todos los nodos hijos del nodo padre indicando. Ejemplo:

En este caso, CSS seleccionara todo los nodos "<p>" que sean hijos de los nodos "<div>"

Código CSS:

div > p {
margin:0;
}
 

Aclaración importante, este selector solo selecciona nodos hijos, no los nodos nietos. Si uno quiere seleccionar todo los nodos "<p>" dentro de un "<div>" hay que usar otro selector. Ejemplo

Código CSS:

div  p {
margin:0;
}
 

Este ejemplo es similar al anterior, con la diferencia, que aca se seleccionaran todos los nodos "<p>" dentros de un "<div>" sin importar si son hijos o nietos, selecciona todos...en cambio el primero, "div > p" solo selecciona los nodos hijos.

Entonces, mirando un poco el ejemplo que has consultado: ul > li > a:hover VS ul li a:hover

- ul > li > a:hover = Aca indicamos un evento hover sobre un nodo <a> que es hijo de un elemento <li> que a su vez es hijo de un elemento <ul>

- ul li a:hover = Aca indicmaos un evento hover sobre todos los nodos (sean hijos o nietos) <a> que esten dentro de un elemento <li>, y a su vez seleccionamos todos los nodos (sean hijos o nietos) <li> que este dentro de un elemento <ul>

Logras ver la diferencia?

[rogeliomx]

Si, si Gracias muy buena respuesta.

[Carlangueitor]

Una buena lectura complementaria: http://librosweb.es/css/capitulo_2/s...avanzados.html

Saludos