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



3 Answers

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

css css-selectors

Por ejemplo:

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

¿Qué significa exactamente el signo > ?




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






Related