selectores - virgulilla css




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

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


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

yes


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


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.





css-selectors