¿Qué significa el selector de CSS “>” (signo más grande)?

Por ejemplo:

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

¿Qué significa exactamente el signo > ?

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

Eso significa que el selector div > p.some_class solo selecciona los párrafos de .some_class que están nesteds directamente dentro de un div , y no los párrafos que están nesteds más adentro.

Una ilustración:

 

Some text here

More text here

Lo que está seleccionado y lo que no es:

  1. Seleccionado
    Esta p.some_class se encuentra directamente dentro del div , por lo que se establece una relación padre-hijo entre ambos elementos.

  2. No seleccionado
    Esta p.some_class está contenida por una blockquote dentro del div , en lugar de la div misma. Aunque esta p.some_class es un descendiente del div , no es un niño; es un nieto

    En consecuencia, mientras que div > p.some_class no coincidirá con este elemento, div p.some_class hará, utilizando en su lugar el combinador descendiente .


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 significa exactamente lo mismo. No hay tal cosa como un “niño indirecto”.

> (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 diferentes combinadores en CSS3:

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

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

enter image description here

Por ejemplo:

       

Paragraph 1 in the div.

Paragraph 2 in the div.

Paragraph 3 in the div.

Paragraph 4. Not in a div.

Paragraph 5. Not in a div.

Salida:

enter image description here

Más información sobre CSS Combinators

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

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

some_class con elementos p con clase some_class que están directamente debajo de un div .

Todas las tags p con clase some_class que son hijos directos de una etiqueta div .

html

 

lohrem text (it will be of red color )

lohrem text (it will NOT be of red color)

lohrem text (it will be of red color )

css

 div > p.some_class{ color:red; } 

Todos los niños directos que son

con .some_class obtendrían el estilo aplicado a ellos.

(selector de niños) se introdujo en css2. div p {} selecciona todos los elementos p decedent de elementos div, mientras que div> p selecciona solo elementos p secundarios, no grand child, great grand child, etc.

  

para tag, child and decedent of p.

  • para inside list.

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