¿Cuál es la diferencia entre '>' y un espacio en los selectores CSS?

127

¿De qué sirve usar esta sintaxis?

div.card > div.name

¿Cuál es la diferencia entre esto?

div.card div.name

css css-selectors

— Randy Mayer
fuente

Además de esta pregunta, como no estaba al tanto de esto y podría usarse para resolver un problema que tengo, ¿qué navegadores admiten este tipo de selector?

— Kyle

3

Es compatible con todos los navegadores actuales. IE obtuvo soporte en la versión 7: msdn.microsoft.com/en-us/library/…

— Matti Virkkunen

212

A > B solo seleccionará B que son hijos directos a A (es decir, no hay otros elementos intermedios).

A B seleccionará cualquier B que esté dentro de A, incluso si hay otros elementos entre ellos.

— Matti Virkkunen
fuente

11

>es el selector hijo Especifica solo elementos secundarios inmediatos y no ningún descendiente (incluidos nietos, bisnietos, etc.) como en el segundo ejemplo sin >.

El selector secundario no es compatible con IE 6 y versiones inferiores. Una gran tabla de compatibilidad está aquí .

— Pekka
fuente

2

div.card > div.namecoincide <div class='card'>....<div class='name'>xxx</div>...</div> pero no coincide<div class='card'>....<div class='foo'> ... <div class='name'>xxx</div>..</div>....</div>

div.card div.name coincide con ambos.

Es decir, el >selector se asegura de que el elemento seleccionado en el lado derecho del elemento >sea un elemento secundario inmediato del elemento en su lado izquierdo.

La sintaxis sin las >coincidencias <div class='name'>que sea descendiente (no solo secundaria) de <div class='card'>.

— René Nyffenegger
fuente

0

A> B selecciona B si es un hijo directo de A, mientras que AB selecciona B si es un hijo directo de B o no.

<p> USING SPACE </p>

<style>
  .a .b {
    background-color: red;
  }
</style>

<span class="a">
  a
  <br>
  <span class="b"> a b</span>
  <br>

  <span class="c">
    <span class="b"> a b c</span>
  </span>
</span>

<br><br>
<p> USING GREATER THAN SIGN</p>

<style>
  .x > .y {
    background-color: red;
  }
</style>

<span class="x">
  x
  <br>
  <span class="y"> x y</span>
  <br>

  <span class="z">
    <span class="y"> x y z</span>
  </span>
</span>

Expandir fragmento

— eozten
fuente

Hay un fragmento de código aquí. No sé si puedes verlo.

— Eozten

La demostración es agradable pero realmente complementaria a la información que responde a la pregunta; información que ya está en las otras tres respuestas. Tal vez si esta pregunta se hiciera hoy, sería útil, pero si va a rechazar una pregunta de> 8 años, realmente debería ser por una razón convincente.

— TylerH

0

> vs espacio

Considere los dos escenarios div > span { }vs.div span { }

Aquí, el <space>selecciona todos los <span>elementos del <div>elemento, incluso si están dentro de otro elemento. El> selecciona todos los <div>elementos secundarios del elemento pero si están dentro de otro elemento.

> (Mayor que):

div > span {
  color: #FFBA00 ;
}

<body>
  <div>

    <p>
      <span>Hello,</span>
    </p>

    <span>World!</span>
  </div>
</body>

Expandir fragmento

Este solo selecciona <span>World!</span>y no buscará la etiqueta <span>interna <p>.

Espacio

div span {
  color: #FFBA00 ;
}

<body>
  <div>
    <p>
      <span>Hello,</span>
    </p>

    <span>World!</span>
  </div>
<body>

Expandir fragmento

Éste selecciona todas las etiquetas span, incluso si están anidadas dentro de otra etiqueta.

— S.Goswami
fuente