Allgemeiner Geschwister-Selektor

Teil des Abschnitts CSS Mastery der HTML-Journey von Coddy — Lektion 5 von 43.

Der allgemeine Geschwisterselektor (~) wählt alle Elemente aus, die Geschwister eines bestimmten Elements sind und nach diesem stehen.

Zum Beispiel:

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

Mit diesem CSS:

h2 ~ p {
  color: blue;
}

Nach Anwendung dieses CSS wird das Ergebnis sein:

Absatz 1 bleibt unverändert (es ist kein Geschwisterelement, das nach h2 folgt)

Absatz 2 wird blau (es ist ein Geschwisterelement, das nach h2 kommt)
Absatz 3 wird blau (es ist ein Geschwisterelement, das nach h2 kommt)

Aufgabe

Einfach

Erstelle eine CSS-Regel unter Verwendung des allgemeinen Geschwister-Selektors, um alle <p>-Elemente, die nach dem <h1> kommen, in leuchtendem Pink (#ff69b4) erstrahlen zu lassen.

Probier es selbst

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