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)

Teste dich selbst

Diese Lektion enthält ein kurzes Quiz. Starte die Lektion, um es zu beantworten und deinen Fortschritt zu speichern.

Teste dich selbst

Diese Lektion enthält ein kurzes Quiz. Starte die Lektion, um es zu beantworten und deinen Fortschritt zu speichern.

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.

Spickzettel

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

h2 ~ p {
  color: blue;
}

Dies wählt alle <p>-Elemente aus, die Geschwister von <h2> sind und nach diesem in der HTML-Struktur stehen.

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>

Teste dich selbst

Diese Lektion enthält ein kurzes Quiz. Starte die Lektion, um es zu beantworten und deinen Fortschritt zu speichern.