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


Answers

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

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 CSS Combinators

Question

Por ejemplo:

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

¿Qué significa exactamente el signo > ?




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




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




Related