Ejercicio — Selectores Combinadores

En este ejercicio se estudian los diferentes tipos de selectores combinadores en CSS: descendiente, hijo directo, hermano adyacente y hermano general. Estos permiten seleccionar elementos en función de su relación dentro del árbol del documento HTML.

Código HTML

<html lang="es">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Ejercicio de Selectores Combinadores</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <div class="container">
        <h2>Sección 1</h2>
        <p class="intro">Este es un párrafo de introducción.</p>
        <p>Otro párrafo en la sección 1.</p>
        <section>
          <h2>Sección 2</h2>
          <p>Primer párrafo de la sección 2.</p>
          <p>Segundo párrafo en la sección 2.</p>
        </section>
    </div>
</body>
</html>

Código CSS

/*Combinador descendiente*/
.container p {
  color: blue;
}

/*Combinador de hijo directo*/
.container > h2 {
  color: red;
}

/*Hermano adyacente*/
h2 + p {
  color: green;
}

/*Hermano general*/
.intro ~ p {
  background-color: yellow;
}

/*Selector múltiple */
h2,
.intro {
  margin-bottom: 10px;
}

/*Selector dependiente */
.container p.intro {
  background-color: gray;
}

Puedes visualizar el resultado final de este ejercicio en el siguiente enlace:

🚀 Ver resultado del ejercicio