examples - Selector CSS ''>''; ¿Qué es?

id css ejemplo

Question

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

He visto el "mayor que" ( > ) utilizado en el código CSS varias veces, pero no puedo averiguar qué hace. ¿Qué hace?

Answer 1

> Selecciona todos los descendientes directos / hijos

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; }
.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>

Answer 2

> selecciona niños inmediatos

Por ejemplo, si tienes divs anidados como tales:

<div class=''outer''>
    <div class="middle">
        <div class="inner">...</div>
    </div>
    <div class="middle">
        <div class="inner">...</div>
    </div>
</div>

y usted declara una regla css en su hoja de estilo como tal:

.outer > div {
    ...
}

sus reglas se aplicarán solo a los divs que tienen una clase de "medio", ya que esos divs son descendientes directos (hijos inmediatos) de elementos con la clase "externa" (a menos que, por supuesto, declare otras reglas más específicas que invaliden 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 tú, en cambio, tuvieras 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 el > .

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 en los selectores de CSS que no están tan bien utilizados, es posible que también desee ver los selectores + , ~ y [attr] , 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 su IE que tiene problemas), y buenos ejemplos de su uso.

Answer 3

Como han dicho otros, es un niño directo, pero vale la pena señalar que esto es diferente a solo 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 igualar eso, podrías hacer div>p>span o div span .

Answer 4

Declara referencia de los padres, mira esta página para ver la definición:

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

Answer 5

Es el selector hijo CSS. Ejemplo:

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

Ver this

Answer 6

Es un selector de niños.

Coincide cuando un elemento es el 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 secundarios:

div ol>li p

Coincide con un elemento P que es descendiente de un LI; el elemento LI debe ser el 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 ">" se ha omitido.

Answer 7

Significa padre / hijo

ejemplo:

html> cuerpo

Eso quiere decir que el cuerpo es un niño de html.

Echa un vistazo a: Selectors