¿Qué significa el selector CSS ">" (mayor que el signo)?

476

Por ejemplo:

div > p.some_class {
  /* Some declarations */
}

¿Qué significa exactamente el >signo?

css css-selectors Misha Moroshko
fuente

Respuestas:

673

>es el combinador secundario , a veces erróneamente llamado combinador descendiente directo. 1

Eso significa que el selector div > p.some_classsolo selecciona los párrafos .some_classque están anidados directamente dentro de a div, y no los párrafos que están anidados más adentro.

Una ilustración:

<div>
    <p class="some_class">Some text here</p>     <!-- Selected [1] -->
    <blockquote>
        <p class="some_class">More text here</p> <!-- Not selected [2] -->
    </blockquote>
</div>

Qué se selecciona y qué no:

  1. Seleccionado
    Esto p.some_classse encuentra directamente dentro de div, por lo tanto, se establece una relación padre-hijo entre ambos elementos.

  2. No seleccionado
    Esto p.some_classestá contenido por un blockquotedentro del div, en lugar del divsí mismo. Aunque este p.some_classes un descendiente de la div, no es un niño; Es un nieto.

    En consecuencia, si bien div > p.some_classno coincidirá con este elemento, lo div p.some_classhará, utilizando el combinador descendente en su lugar.

1 Muchas personas van más allá y lo llaman "hijo directo" o "hijo inmediato", pero eso es completamente innecesario (e increíblemente molesto para mí), porque un elemento hijo es inmediato por definición de todos modos, por lo que significan exactamente lo mismo. No existe tal cosa como un "niño indirecto".

BoltClock
fuente
2
+1 ¿Se llama realmente un selector hijo ? Si es así, eso es bastante engañoso. Pensé #something aque sería un selector de niños.
alex
2
@alex: sí :) #something apodría significar que aes un nieto o bisnieto de ^ #something(no tiene en cuenta la profundidad de anidación).
BoltClock
12
@alex se llama el combinador de niños , el espacio se llama el combinador descendiente
robertc
33
Cuando alguien es el hijo de su abuelo, nos enfrentamos a un caso de incesto realmente desagradable. Afortunadamente, eso es imposible en HTML.
Quentin
8
No escucho a ningún laico llamando a sus hijos sus hijos directos por razones de claridad.
BoltClock
41

> (signo mayor que) es un combinador de CSS.

Un combinador es algo que explica la relación entre los selectores.

Un selector CSS puede contener más de un selector simple. Entre los selectores simples, podemos incluir un combinador.

Hay cuatro combinadores diferentes en CSS3:

  1. selector descendiente (espacio)
  2. selector de niños (>)
  3. selector de hermano adyacente (+)
  4. selector general de hermanos (~)

Nota: < no es válido en selectores CSS.

ingrese la descripción de la imagen aquí

Por ejemplo: 

<!DOCTYPE html>
<html>
<head>
<style>
div > p {
    background-color: yellow;
}
</style>
</head>
<body>

<div>
  <p>Paragraph 1 in the div.</p>
  <p>Paragraph 2 in the div.</p>
  <span><p>Paragraph 3 in the div.</p></span> <!-- not Child but Descendant -->
</div>

<p>Paragraph 4. Not in a div.</p>
<p>Paragraph 5. Not in a div.</p>

</body>
</html>

Salida:

ingrese la descripción de la imagen aquí

Más información sobre los combinadores CSS

Premraj
fuente
developer.mozilla.org/en-US/docs/Learn/CSS/Introduction_to_CSS/…
Lalit Yadav
@premraj ¡Gracias por la excelente explicación de los selectores CSS-padres e hijos!
Código Y
¿Qué significa entonces cuando obtienes algo como lo .entry-content > * {"code" }que sigue .entry-content {"other code" }? ¿No .entry-content > *cubre a todos los hijos de entry-content?
Código Y
14

Como otros mencionan, es un selector de niños. Aquí está el enlace apropiado.

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

Dagg Nabbit
fuente
Muchas gracias por el vínculo ! Descubrí también los "Selectores de hermanos adyacentes" allí.
Misha Moroshko
Encontrarás soporte para el navegador en Sitepoint. No funciona en IE6 si es importante para sus proyectos, está bien en cualquier otro lugar. Este recurso es esp. útil para hermanos: nth-child (), etc., donde el apoyo aún está incompleto
FelipeAls
10

Hace coincidir pelementos con clases some_classque están directamente debajo de a div.

dan04
fuente
5

Todas las petiquetas con clase some_classque son hijos directos de una divetiqueta.

tschaible
fuente
4
html 
<div>
    <p class="some_class">lohrem text (it will be of red color )</p>    
    <div>
        <p class="some_class">lohrem text (it will  NOT be of red color)</p> 
    </div>
    <p class="some_class">lohrem text (it will be  of red color )</p>
</div>
css 
div > p.some_class{
    color:red;
}

Todos los niños directos que están <p>con .some_classellos se les aplicaría el estilo.

suraj rawat
fuente
3

(selector de niños) se introdujo en css2. div p {} selecciona todos los elementos p difuntos de los elementos div, mientras que div> p selecciona solo elementos p hijos, no nietos, bisnietos, etc.

<style>
  div p{  color:red  }       /* match both p*/
  div > p{  color:blue  }    /* match only first p*/

</style>

<div>
   <p>para tag, child and decedent of p.</p>
   <ul>
       <li>
            <p>para inside list. </p>
       </li>
   </ul>
</div>

Para obtener más información sobre CSS Ce [lectores y su uso, consulte mi blog, selectores css y selectores css3

Avinash Malhotra
fuente
0

El selector de signo mayor (>) en CSS significa que el selector de la derecha es un descendiente / hijo directo de lo que esté a la izquierda.

Un ejemplo:

article > p { }

Significa solo diseñar un párrafo que viene después de un artículo.

Autenticigh
fuente