Selector de hermano general

Parte de la sección CSS Mastery del Journey de HTML de Coddy — lección 5 de 43.

El selector general de hermanos (~) selecciona todos los elementos que son hermanos de un elemento especificado y que aparecen después de él.

Por ejemplo:

<div>
  <p>Paragraph 1</p>
  <h2>Heading</h2>
  <p>Paragraph 2</p>
  <p>Paragraph 3</p>
</div>

Con este CSS:

h2 ~ p {
  color: blue;
}

Después de aplicar este CSS, el resultado será:

El párrafo 1 permanece sin cambios (no es un hermano que venga después de h2)

El párrafo 2 se vuelve azul (es un hermano que viene después de h2)
El párrafo 3 se vuelve azul (es un hermano que viene después de h2)

Ponte a prueba

Esta lección incluye un breve cuestionario. Empieza la lección para responderlo y registrar tu progreso.

Ponte a prueba

Esta lección incluye un breve cuestionario. Empieza la lección para responderlo y registrar tu progreso.

Desafío

Fácil

Crea una regla CSS usando el selector general de hermanos para hacer que todos los elementos <p> que aparezcan después del <h1> se iluminen en rosa brillante (#ff69b4).

Hoja de referencia

El selector de hermanos generales (~) selecciona todos los elementos que son hermanos de un elemento especificado y aparecen después de él.

h2 ~ p {
  color: blue;
}

Esto selecciona todos los elementos <p> que son hermanos de <h2> y aparecen después de él en la estructura HTML.

Pruébalo tú mismo

<html>
<head>
    <title>General Sibling Selector</title>
    <style>
        /* CSS solution goes here */

    </style>
</head>
<body>
    <h1>Welcome to the Party!</h1>
    <p>Grab a drink.</p>
    <p>Say hello to new friends.</p>
    <div>Dance floor area</div>
    <p>Take a selfie!</p>
    <p>Enjoy the snacks.</p>
</body>
</html>

Ponte a prueba

Esta lección incluye un breve cuestionario. Empieza la lección para responderlo y registrar tu progreso.