1
Posible Duplicado:
¿Qué significa " > " en las reglas CSS?
He visto el "mayor que" (>) utilizado en el código CSS un par de veces, pero no puedo averiguar lo que hace. ¿Qué hace?
7 answers
> selecciona hijos inmediatos
Por ejemplo, si has anidado divs como tales:
<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 estilos como:
.outer > div {
...
}
Sus reglas se aplicarán solo a aquellos divs que tienen una clase de "medio" 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 juguetear.
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 usted, en cambio, tenía 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. Funciona en todas las demás corrientes navegadores sin embargo, incluyendo IE7 e IE8.
Si está buscando selectores CSS menos utilizados, es posible que también desee mirar +, ~, y [attr] selectores, 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 que tiene problemas), y buenos ejemplos de su uso.
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2017-01-20 19:43:54
> selecciona todos descendientes directos / hijos
Un espacio el selector seleccionará a todos los descendientes profundos, mientras que un selector mayor que > solo seleccionará a todos los descendientes inmediatos. Véase fiddle, 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>Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2017-01-20 20:58:23
Es el selector secundario CSS. Ejemplo:
div > p selecciona todos los párrafos que son hijos directos de div.
Ver esto
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2010-12-16 10:41:48
Como otros han dicho, 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.
<div>
<span>Some text</span>
</div>
div>span coincidiría con esto, pero no coincidiría con esto:
<div>
<p><span>Some text</span></p>
</div>
Para que coincida con eso, podría hacer div>p>span o div span.
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2010-12-16 11:44:00
Es un Selector Hijo.
Coincide cuando un elemento es hijo de algún elemento. Se compone de 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 hijos:
div ol>li p
Coincide con un elemento P que es un descendiente de un LI; el elemento LI debe ser el hijo de un OL elemento; el elemento OL debe ser un descendiente de un DIV. Observe que el espacio en blanco opcional alrededor del combinador " > " se ha omitido.
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2010-12-16 10:50:13
Declara la referencia del padre, mira esta página para la definición:
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2013-09-10 07:17:37
Significa padre/hijo
Ejemplo:
Html > body
Eso significa que el cuerpo es un hijo de html
Echa un vistazo: Selectores
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2013-01-24 06:24:12