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




hijos padre (7)

> (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

Por ejemplo:

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

¿Qué significa exactamente el signo > ?


(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


> 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".


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

yes


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.


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


Otra solución solo para CSS (aunque se necesita un atributo de datos si no desea escribir CSS específico para cada letra). Este funciona más en todos los ámbitos (Tested IE 9/10, Chrome más reciente y FF más reciente)

span {
  position: relative;
  color: rgba(50,50,200,0.5);
}

span:before {
  content: attr(data-char);
  position: absolute;
  width: 50%;
  overflow: hidden;
  color: rgb(50,50,200);
}
<span data-char="X">X</span>





css css-selectors