Selector CSS '>'; ¿qué es? [duplicar]
He visto el "mayor que" ( >) usado en el código CSS varias veces, pero no puedo entender qué hace. ¿Qué hace?
>selecciona hijos inmediatos
Por ejemplo, si tienes divs anidados como estos:
<div class='outer'>
<div class="middle">
<div class="inner">...</div>
</div>
<div class="middle">
<div class="inner">...</div>
</div>
</div>
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 "intermedia", ya que esos divs son descendientes directos (hijos inmediatos) de elementos con clase "externa" (a menos, por supuesto, que 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 class='outer'>
div.outer - This is the parent.
<div class="middle">
div.middle - This is an immediate child of "outer". This will receive the orange border.
<div class="inner">div.inner - This is an immediate child of "middle". This will not receive the orange border.</div>
</div>
<div class="middle">
div.middle - This is an immediate child of "outer". This will receive the orange border.
<div class="inner">div.inner - This is an immediate child of "middle". This will not receive the orange border.</div>
</div>
</div>
<p>Without Words</p>
<div class='outer'>
<div class="middle">
<div class="inner">...</div>
</div>
<div class="middle">
<div class="inner">...</div>
</div>
</div>Nota al margen
Si, en cambio, tuviera un espacio entre selectores en lugar de >, sus reglas se aplicarían a ambos divs anidados. El espacio se usa mucho más comúnmente y define un "selector descendiente", lo que significa que busca cualquier elemento coincidente en el árbol en lugar de solo hijos inmediatos como lo >hace.
NOTA: El >selector no es compatible con IE6. Sin embargo, funciona en todos los demás navegadores actuales, incluidos IE7 e IE8.
Si está buscando selectores de CSS menos utilizados, es posible que también desee consultar los selectores +, ~y [attr], todos los cuales pueden ser muy útiles.
Esta página tiene una lista completa de todos los selectores disponibles, junto con detalles de su soporte en varios navegadores (principalmente IE el que tiene problemas) y buenos ejemplos de su uso.
>selecciona todos los descendientes/hijos directos
Un selector de espacio seleccionará a todos los descendientes profundos, mientras que un >selector mayor que solo seleccionará a todos los descendientes inmediatos. Ver violín, por ejemplo.
div { border: 1px solid black; margin-bottom: 10px; }
.a b { color: red; } /* every John is red */
.b > b { color: blue; } /* Only John 3 and John 4 are blue */<div class="a">
<p><b>John 1</b></p>
<p><b>John 2</b></p>
<b>John 3</b>
<b>John 4</b>
</div>
<div class="b">
<p><b>John 1</b></p>
<p><b>John 2</b></p>
<b>John 3</b>
<b>John 4</b>
</div>
Es el selector secundario de CSS. Ejemplo:
div > pselecciona todos los párrafos que son hijos directos de div.
Mira esto
Como otros han dicho, es un hijo directo, pero vale la pena señalar que esto es diferente a simplemente dejar un espacio... un espacio es para cualquier descendiente.
<div>
<span>Some text</span>
</div>
div>spancoincidiría con esto, pero no coincidiría con esto:
<div>
<p><span>Some text</span></p>
</div>
Para igualar eso, podrías hacer div>p>spano div span.
Es un selector infantil.
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 hijos 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 descendiente de un DIV. Observe que el espacio en blanco opcional alrededor del combinador ">" se ha omitido.
