Kombinatoren

Nachfahren-Kombinator

Der Nachfahren-Kombinator — dargestellt durch ein einzelnes Leerzeichen ( ) — kombiniert zwei Selektoren so, dass Elemente, die vom zweiten Selektor erfasst werden, ausgewählt werden, wenn sie einen Vorfahren (ein Elternteil, ein Elternteil eines Elternteils oder ein Elternteil eines Elternteils eines Elternteils, usw.) haben, der dem ersten Selektor entspricht. Selektoren, die einen Nachfahren-Kombinator verwenden, werden Nachfahren-Selektoren genannt.

body article p {
}

Im folgenden Beispiel erfassen wir nur das <p>-Element, das sich innerhalb eines Elements mit der Klasse .box befindet.

<div class="box"><p>Text in .box</p></div>
<p>Text not in .box</p>

.box p {
  color: red;
}

Kind-Kombinator

Der Kind-Kombinator (>) wird zwischen zwei CSS-Selektoren platziert. Er erfasst nur die Elemente, die vom zweiten Selektor erfasst werden und direkte Kinder von Elementen sind, die vom ersten Selektor erfasst werden. Nachfahren-Elemente weiter unten in der Hierarchie werden nicht erfasst. Zum Beispiel, um nur <p>-Elemente auszuwählen, die direkte Kinder von <article>-Elementen sind:

article > p {
  /* … */
}

Im nächsten Beispiel haben wir eine geordnete Liste (<ol>), die in einer ungeordneten Liste (<ul>) verschachtelt ist. Der Kind-Kombinator wählt nur jene <li>-Elemente, die direkte Kinder eines <ul> sind und gestaltet sie mit einer oberen Begrenzungslinie.

<ul>
  <li>Unordered item</li>
  <li>
    Unordered item
    <ol>
      <li>Item 1</li>
      <li>Item 2</li>
    </ol>
  </li>
</ul>

ul > li {
  border-top: 5px solid red;
}

Im vorherigen Beispiel versuchen Sie, das > zu entfernen, das den Selektor als Kind-Selektor kennzeichnet. Sie erhalten einen Nachfahren-Selektor, und alle <li>-Elemente werden mit einer roten Begrenzungslinie versehen.

Nächste-Geschwister-Kombinator

Der nächste-Geschwister-Kombinator (+) wird zwischen zwei CSS-Selektoren platziert. Er erfasst nur die Elemente, die vom zweiten Selektor erfasst werden und direkt nach dem Element kommen, das vom ersten Selektor erfasst wird. Zum Beispiel, um alle <img>-Elemente auszuwählen, die direkt von einem <p>-Element gefolgt werden:

p + img {
  /* … */
}

Ein häufiger Anwendungsfall ist es, etwas mit einem Absatz zu machen, der auf eine Überschrift folgt, wie im folgenden Beispiel. Hier wählen wir jeden Absatz aus, der ein Elternelement mit einem <h1> teilt und diesem <h1> direkt folgt.

<article>
  <h1>A heading</h1>
  <p>
    Veggies es bonus vobis, proinde vos postulo essum magis kohlrabi welsh onion
    daikon amaranth tatsoi tomatillo melon azuki bean garlic.
  </p>

  <p>
    Gumbo beet greens corn soko endive gumbo gourd. Parsley shallot courgette
    tatsoi pea sprouts fava bean collard greens dandelion okra wakame tomato.
    Dandelion cucumber earthnut pea peanut soko zucchini.
  </p>
</article>

body {
  font-family: sans-serif;
}

h1 + p {
  font-weight: bold;
  background-color: #333333;
  color: white;
  padding: 0.5em;
}

Im vorherigen Beispiel:

1. Versuchen Sie, ein weiteres Element wie ein <h2> zwischen <h1> und <p> einzufügen. Sie werden feststellen, dass der Absatz nicht mehr durch den Selektor erfasst wird und daher der Hintergrund und die Vordergrundfarbe nicht angewendet werden, wenn das Element benachbart ist.
2. Ändern Sie nun den h1 + p-Selektor, damit der spezielle Stil erneut auf den ersten Absatz angewendet wird.

Folgende-Geschwister-Kombinator

Wenn Sie Geschwister eines Elements auswählen möchten, auch wenn sie nicht direkt benachbart sind, können Sie den folgende-Geschwister-Kombinator (~) verwenden. Um alle <img>-Elemente auszuwählen, die irgendwo nach <p>-Elementen kommen:

p ~ img {
  /* … */
}

Im folgenden Beispiel wählen wir alle <p>-Elemente aus, die nach dem <h1> kommen, und obwohl sich ein <div> ebenfalls im Dokument befindet, wird das <p> danach ausgewählt.

<article>
  <h1>A heading</h1>
  <p>I am a paragraph.</p>
  <div>I am a div</div>
  <p>I am another paragraph.</p>
</article>

body {
  font-family: sans-serif;
}

h1 ~ p {
  font-weight: bold;
  background-color: #333333;
  color: white;
  padding: 0.5em;
}

Kombination von Kombinatoren mit Selektoren

Sie können jeden der Selektoren, die wir in früheren Lektionen entdeckt haben, mit Kombinatoren kombinieren, um einen Teil Ihres Dokuments auszuwählen. Zum Beispiel, um Listenelemente mit einer class von a auszuwählen, die direkte Kinder eines <ul> sind, versuchen Sie folgendes:

ul > li[class="a"] {
}

Seien Sie jedoch vorsichtig, wenn Sie große Listen von Selektoren erstellen, die sehr spezifische Teile Ihres Dokuments auswählen. Es wird schwierig sein, die CSS-Regeln wiederzuverwenden, da Sie den Selektor sehr spezifisch für den Ort dieses Elements im Markup gemacht haben.

Es ist oft besser, eine einfache Klasse zu erstellen und diese auf das betreffende Element anzuwenden. Dennoch wird Ihr Wissen über Kombinatoren sehr nützlich, wenn Sie etwas in Ihrem Dokument stylen müssen und keinen Zugriff auf das HTML haben, möglicherweise weil es von einem CMS generiert wird.

Zusammenfassung

Das war es erst einmal mit Selektoren. Als Nächstes werden wir Ihnen einige Tests geben, mit denen Sie prüfen können, wie gut Sie die Informationen zu CSS-Selektoren verstanden und behalten haben.

• Zurück
• Übersicht: Grundlagen der CSS-Stilgestaltung
• Weiter