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.

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

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.

Spickzettel

Der Nachbarselektor (+) formatiert ein Element, das unmittelbar auf ein bestimmtes Element folgt. Beide Elemente müssen dasselbe Elternelement haben.

Syntax:

element1 + element2 {
  /* Styles */
}

Beispiel:

h2 + p {
  font-weight: bold;
}

Dies spricht Absätze an, die direkt auf ein h2-Element folgen.

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>

Teste dich selbst

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