Direkter Nachbar-Selektor

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

Der Selektor für benachbarte Geschwisterelemente (+) wird verwendet, um ein Element zu gestalten, das direkt auf ein bestimmtes Element folgt. Beide müssen denselben Elternknoten haben, und „benachbart“ bedeutet „direkt nebeneinander“.

Zum Beispiel:

<h2>Heading</h2>
<p>This paragraph is styled</p>

Mit diesem CSS:

h2 + p {
  font-weight: bold;
}

Der Absatz ist gestylt, da er direkt auf ein h2-Element folgt.

Aufgabe

Einfach

Erstellen Sie einen CSS-Selektor, der nur die Absätze (<p>) anspricht, die direkt auf ein <h2>-Element folgen, das ein Basketballspiel beschreibt. Formatieren Sie diese Absätze mit einer blue Schriftfarbe und einer Schriftgröße von 18px.

Probier es selbst

<html>
<head>
    <title>Adjacent Sibling Selector</title>
    <style>
        /* CSS solution goes here */
        
    </style>
</head>
<body>
    <h2>Basketball Game Overview</h2>
    <p>The basketball game was an exciting match between the **Los Angeles Lakers** and the **Golden State Warriors**, featuring intense offense and solid defense from both teams.</p>
    
    <p>During the first half, the Lakers held a slight lead, with LeBron James making key plays, while Stephen Curry of the Warriors kept the game tight with impressive three-pointers.</p>
    
    <p>This paragraph is not directly after an h2, so it should not be affected.</p>
    
    <p>In the second half, the Warriors fought back, with Klay Thompson hitting critical shots, but the Lakers secured their win with solid defense and a game-winning dunk by Anthony Davis.</p>
</body>
</html>