Kombinierte Selektoren

1. Arten der kombinierten Selektoren

CSS kombinierte Selektoren ermöglichen das Auswählen von Elementen basierend auf ihrer hierarchischen Position relativ zu anderen Elementen. Das macht sie nützlich, um Stile auf Elemente anzuwenden, die vom Kontext abhängen, oder wenn wir Elemente in einer komplexen Struktur stylen müssen. Kombinationen von Selektoren sind ein starkes Tool für präzise Auswahl, wenn eine Klasse oder ID nicht ausreicht. Lassen wir uns die Hauptarten der kombinierten Selektoren in CSS ansehen, einschließlich Nachfahren-Selektoren, Kind-Selektoren, benachbarte Geschwister-Selektoren und allgemeine Geschwister-Selektoren.

Kombinierte Selektoren in CSS umfassen verschiedene Wege, Elemente basierend auf der HTML-Hierarchie auszuwählen. Die Hauptarten der kombinierten Selektoren:

• Nachfahren-Selektor (Descendant Selector): Wählt Elemente, die sich innerhalb eines anderen Elements befinden, auf jeder Verschachtelungsebene.
• Kind-Selektor (Child Selector): Wählt nur direkte (unmittelbare) Nachkommen eines bestimmten Elements.
• Benachbarter Geschwister-Selektor (Adjacent Sibling Selector): Wählt ein Element, das direkt nach einem anderen Element auf derselben Hierarchieebene folgt.
• Allgemeiner Geschwister-Selektor (General Sibling Selector): Wählt alle Elemente derselben Hierarchieebene, die nach einem angegebenen Element folgen.

Jeder dieser Selektoren eignet sich für verschiedene Fälle und ermöglicht eine genaue Auswahl von Elementen basierend auf ihrer Position auf der Seite.

2. Nachfahren-Selektor (Descendant Selector)

Der Nachfahren-Selektor wählt alle Elemente innerhalb eines anderen Elements, unabhängig von der Verschachtelungsebene. Er wird durch Leerzeichen zwischen den Selektoren geschrieben. Dieser Selektor ist nützlich, wenn man Elemente innerhalb eines anderen Elements stylen möchte, z. B. alle <p> innerhalb eines <div> mit einer bestimmten Klasse.

.container p {
  color: blue;
}

<div class="container">
  <p>Dieser Text wird blau, da er sich im Container befindet.</p>
  <div>
    <p>Dieser Text wird auch blau.</p>
  </div>
</div>
<p>Dieser Text bleibt unverändert, da er sich nicht im Container befindet.</p>

Hier wählt der Selektor .container p alle <p>-Elemente innerhalb des Elements mit der Klasse container, einschließlich Elementen auf jeder Verschachtelungsebene.

3. Kind-Selektor (Child Selector)

Der Kind-Selektor wählt nur unmittelbare Nachkommen eines Elements aus. Er wird mit dem Zeichen > zwischen den Selektoren geschrieben. Dieser Selektor ist praktisch, wenn man nur Elemente der obersten Verschachtelungsebene stylen möchte, ohne tiefere Ebenen zu beeinflussen.

      
  .container > p {
    font-weight: bold;
  }
      
    

      
  <div class="container">
    <p>Dieser Text wird fett.</p>
    <div>
      <p>Dieser Text bleibt normal, da er kein direkter Nachkomme von container ist.</p>
    </div>
  </div>
      
    

Hier wird nur der erste <p> fett, da er ein direkter Nachkomme von .container ist, während das verschachtelte <p> nicht verändert wird.

4. Benachbarter Geschwister-Selektor (Adjacent Sibling Selector)

Der benachbarte Geschwister-Selektor wählt ein Element, das sich direkt nach einem anderen Element auf derselben Verschachtelungsebene befindet. Dieser Selektor wird mit dem Zeichen + zwischen den Selektoren geschrieben und ist nützlich, um Stile auf ein Element anzuwenden, das direkt nach einem anderen folgt, z. B. auf den ersten Absatz, der einem Titel folgt.

      
  h2 + p {
    color: green;
  }
      
    

      
  <h2>Überschrift</h2>
  <p>Dieser Text wird grün, da er direkt nach der Überschrift folgt.</p>
  <p>Dieser Text bleibt unverändert, da er kein benachbartes Element nach h2 ist.</p>
      
    

Hier ändert der Selektor h2 + p nur die Farbe des ersten <p>-Elements, das direkt nach <h2> folgt.

5. Allgemeiner Geschwister-Selektor (General Sibling Selector)

Der allgemeine Geschwister-Selektor wählt alle Elemente aus, die nach einem bestimmten Element auf derselben Hierarchieebene folgen, unabhängig davon, ob sie sich direkt danach oder nach mehreren Elementen befinden. Dieser Selektor wird mit dem Zeichen ~ zwischen den Selektoren geschrieben.

      
  h2 ~ p {
    font-style: italic;
  }
      
    

      
  <h2>Überschrift</h2>
  <p>Dieser Absatz wird kursiv.</p>
  <div>
    <p>Dieser Absatz wird auch kursiv, da er ein Geschwister von h2 auf derselben Ebene ist.</p>
  </div>
      
    

In diesem Beispiel wählt der Selektor h2 ~ p alle <p>-Elemente, die nach <h2> auf derselben Ebene folgen, unabhängig davon, ob sich andere Elemente dazwischen befinden.

6. Beispiel für die Verwendung aller kombinierten Selektoren

Im Folgenden findest du ein HTML- und CSS-Beispiel, das die Verwendung aller kombinierten Selektoren zur Auswahl verschiedener Elemente basierend auf ihrer Position auf der Seite demonstriert.

<!DOCTYPE html>
<html lang="de">
<head>
  <meta charset="UTF-8">
  <title>Beispiel für kombinierte CSS-Selektoren</title>
  <link rel="stylesheet" href="styles.css">
</head>
<body>
  <div class="container">
    <p>Ein Absatz, der ein Nachfahre und ein Kind von .container ist.</p>
    <div>
      <p>Ein Absatz, der ein Nachfahre, aber kein Kind von .container ist.</p>
    </div>
  </div>
  <h2>Überschrift</h2>
  <p>Ein Absatz, der ein benachbarter Geschwister von h2 ist.</p>
  <div>Dieser Block beeinflusst die folgenden Absätze nicht.</div>
  <p>Ein Absatz, der ein allgemeiner Geschwister von h2 ist.</p>
</body>
</html>

<!DOCTYPE html>
<html lang="de">
<head>
  <meta charset="UTF-8">
  <title>Beispiel für kombinierte CSS-Selektoren</title>
  <link rel="stylesheet" href="styles.css">
</head>
<body>
  <div class="container">
    <p>Ein Absatz, der ein Nachfahre und ein Kind von .container ist.</p>
    <div>
      <p>Ein Absatz, der ein Nachfahre, aber kein Kind von .container ist.</p>
    </div>
  </div>
  <h2>Überschrift</h2>
  <p>Ein Absatz, der ein benachbarter Geschwister von h2 ist.</p>
  <div>Dieser Block beeinflusst die folgenden Absätze nicht.</div>
  <p>Ein Absatz, der ein allgemeiner Geschwister von h2 ist.</p>
</body>
</html>

/* Nachfahren-Selektor */
.container p {
  color: blue;
}

/* Kind-Selektor */
.container > p {
  font-weight: bold;
}

/* Benachbarter Geschwister-Selektor */
h2 + p {
  color: green;
}

/* Allgemeiner Geschwister-Selektor */
h2 ~ p {
  font-style: italic;
}