virgulilla selectores nuevos hijos excluir etiquetas elemento ejemplo css css-selectors

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



selector padre css (7)

(selector de niños) fue introducido en css2. div p {} selecciona todos los elementos p difuntos de los elementos div, mientras que div> p selecciona solo elementos p hijo, no nieto, nieto nieto, 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 los CSS Ce [lectores y su uso, consulte mi blog, los selectores css y los selectores css3

Por ejemplo:

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

¿Qué significa exactamente el signo > ?

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

yes

Hace coincidir los elementos p con la clase some_class que están directamente debajo de un div .

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

> (mayor que el signo) 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 de descendientes (espacio)
  2. selector de niños (>)
  3. selector de hermanos adyacente (+)
  4. selector general de hermanos (~)

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

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:

Más información sobre los combinadores de CSS

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

Eso significa que el selector div > p.some_class solo selecciona los párrafos de .some_class que se anidan directamente dentro de un div , y no los párrafos que se anidan 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>

Lo que está seleccionado y lo que no está

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

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

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

1 Muchas personas van más allá y lo llaman "niño directo" o "niño 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".

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 elementos .some_class que son <p> con .some_class obtendrían el estilo aplicado a ellos.