Selector CSS ‘>’; ¿Qué es?

Posible duplicado:
¿Qué significa “>” en las reglas de CSS?

He visto el “mayor que” ( > ) usado en el código CSS algunas veces, pero no puedo entender qué hace. ¿Qué hace?

> selecciona niños inmediatos

Por ejemplo, si tiene divs nesteds como estos:

 
...
...

y declaras una regla css en tu hoja de estilo como esta:

 .outer > div { ... } 

sus reglas se aplicarán solo a aquellos divs que tienen una clase de “middle” ya que esos divs son descendientes directos (hijos inmediatos) de elementos con clase “outer” (a menos que, por supuesto, declare otras reglas más específicas que anulen estas reglas) . Ver violín.

 div { border: 1px solid black; padding: 10px; } .outer > div { border: 1px solid orange; } 
 
div.outer - This is the parent.
div.middle - This is an immediate child of "outer". This will receive the orange border.
div.inner - This is an immediate child of "middle". This will not receive the orange border.
div.middle - This is an immediate child of "outer". This will receive the orange border.
div.inner - This is an immediate child of "middle". This will not receive the orange border.

Without Words

...
...

> selecciona todos los descendientes directos / niños

Un espacio el selector seleccionará todos los descendientes profundos, mientras que un selector mayor que > solo seleccionará todos los descendientes inmediatos. Ver violín por ejemplo.

 div { border: 1px solid black; margin-bottom: 10px; } .ab { color: red; } /* every John is red */ .b > b { color: blue; } /* Only John 3 and John 4 are blue */ 
 

John 1

John 2

John 3 John 4

John 1

John 2

John 3 John 4

Es el selector de elementos secundarios de CSS. Ejemplo:

div > p selecciona todos los párrafos que son hijos directos de div.

Mira esto

Como han dicho otros, es un niño directo, pero vale la pena señalar que esto es diferente a simplemente dejar un espacio … un espacio es para cualquier descendiente.

 
Some text

div>span coincidiría con esto, pero no coincidiría con esto:

 

Some text

Para que coincida con eso, puedes hacer div>p>span o div span .

Es un Selector de niños.

Coincide cuando un elemento es hijo de algún elemento. Está formado por dos o más selectores separados por “>”.

Ejemplo (s):

La siguiente regla establece el estilo de todos los elementos P que son secundarios de BODY:

 body > P { line-height: 1.3 } 

Ejemplo (s):

El siguiente ejemplo combina selectores descendientes y selectores secundarios:

 div ol>li p 

Coincide con un elemento P que es descendiente de un LI; el elemento LI debe ser hijo de un elemento OL; el elemento OL debe ser un descendiente de un DIV. Observe que el espacio en blanco opcional alrededor del combinador “>” ha quedado fuera.

Declara referencia padre, mira esta página para la definición:

http://www.w3.org/TR/CSS2/selector.html#child-selectors

Significa padre / hijo

ejemplo:

html> cuerpo

eso es decir que el cuerpo es hijo de html

Echa un vistazo a: Selectores