Direkter Nachbar-Selektor

Lektion 9 von 15 im Kurs CSS Selectors von Coddy.

Tauchen wir ein in die Selektoren für direkt benachbarte Geschwisterelemente. Diese Selektoren zielen auf Elemente ab, die denselben Elternteil teilen und unmittelbar nach dem ausgewählten Element kommen. Ein Selektor für direkt benachbarte Geschwister ist ein CSS-Selektor, der alle Elemente auswählt, die Geschwister eines bestimmten Elements sind und direkt an dieses angrenzen. Der Selektor für direkt benachbarte Geschwister wird durch ein Pluszeichen (+) zwischen zwei Selektoren gekennzeichnet.

Syntax

former_element + target_element {
  /* Style-Eigenschaften */
}

Angenommen, wir haben diese HTML-Struktur:

<div class="container">
   <p>First paragraph</p>
   <span>Adjacent span</span>
   <p>Second paragraph</p>
</div>

Um das <span> zu formatieren, das unmittelbar auf einen Absatz folgt, würden Sie den Selektor für direkt benachbarte Geschwister verwenden:

p + span {
   font-weight: bold;
}

In diesem Fall wird das „Adjacent span“ eine fettgedruckte Schriftstärke haben.

Aufgabe

Einfach

Erstellen Sie eine Webseite mit einem p-Element und einem span-Element.
Verwenden Sie einen Selektor für benachbarte Geschwisterelemente (Adjacent Sibling Selector), um das span-Element, das unmittelbar auf das p-Element folgt, so zu gestalten, dass es einen roten Rahmen hat.

Probier es selbst

<html>
<head>
    <title>Adjacent Sibling Selector Exercise</title>
    <style>
        /* CSS Code goes here */
    </style>
</head>
<body>
    
</body>
</html>

Alle Lektionen in CSS Selectors

1Einführung in CSS-Selektoren

Zweck von CSS-Selektoren Warum sind sie wichtig?

4Attributselektoren

Einführung in Attributselektoren Vorhandensein und exakte Werte Attributwert-Selektoren Attributwert-Selektoren II Attributwert-Selektoren III

2Einfache Selektoren

Typ-Selektoren Klassen-Selektoren ID-Selektoren Universalselektoren

3Kombinator-Selektoren

Kind-Selektor Nachfahren-SelektorDirekter Nachbar-SelektorAllgemeiner Geschwister-Selektor