Kombinatoren

Der Nachfahrkombinator — typischerweise durch ein einzelnes Leerzeichen ( ) dargestellt — kombiniert zwei Selektoren, sodass Elemente, die durch den zweiten Selektor übereinstimmen, ausgewählt werden, wenn sie ein Vorfahrenelement (Eltern, Elternteil eines Elternteils, usw.) haben, das mit dem ersten Selektor übereinstimmt. Selektoren, die einen Nachfahrkombinator verwenden, werden Nachfahrselektoren genannt.

body article p {
}

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

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

.box p {
  color: red;
}

Der Kindkombinator (>) wird zwischen zwei CSS-Selektoren platziert. Er wählt nur diejenigen Elemente aus, die dem zweiten Selektor entsprechen und direkte Kinder derjenigen Elemente sind, die dem ersten entsprechen. Nachfahrenelemente weiter unten in der Hierarchie werden nicht ausgewählt. Um beispielsweise nur <p>-Elemente auszuwählen, die direkte Kinder von <article>-Elementen sind:

article > p

Im nächsten Beispiel haben wir eine geordnete Liste (<ol>) innerhalb einer ungeordneten Liste (<ul>). Der Kindkombinator wählt nur die <li>-Elemente aus, die direkte Kinder eines <ul> sind, und stylt sie mit einem oberen Rahmen.

Wenn Sie das > entfernen, das dies als Kindkombinator kennzeichnet, erhalten Sie einen Nachfahrselektor und alle <li>-Elemente erhalten einen roten Rahmen.

<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;
}

Der Nachbarkombinator (+) wird zwischen zwei CSS-Selektoren platziert. Er wählt nur diejenigen Elemente aus, die dem zweiten Selektor entsprechen und das nächste Geschwisterelement des ersten Selektors sind. Um beispielsweise alle <img>-Elemente auszuwählen, die unmittelbar von einem <p>-Element gefolgt werden:

p + img

Ein häufiges Anwendungsbeispiel ist das Stylen eines Absatzes, der auf eine Überschrift folgt, wie im folgenden Beispiel. In diesem Beispiel suchen wir nach einem beliebigen Absatz, der ein Elternelement mit einem <h1> teilt und unmittelbar diesem <h1> folgt.

Wenn Sie ein anderes Element wie ein <h2> zwischen das <h1> und das <p> einfügen, werden Sie feststellen, dass der Absatz nicht mehr vom Selektor ausgewählt wird und daher nicht die Hintergrund- und Vordergrundfarbe erhält, wenn das Element benachbart ist.

<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: #333;
  color: #fff;
  padding: 0.5em;
}

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

p ~ img

Im folgenden Beispiel wählen wir alle <p>-Elemente aus, die nach dem <h1> kommen, und obwohl sich auch ein <div> im Dokument befindet, wird das <p>, das danach kommt, 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: #333;
  color: #fff;
  padding: 0.5em;
}

Das CSS-Nesting-Modul ermöglicht es, verschachtelte Regeln zu schreiben, die Kombinatoren verwenden, um komplexe Selektoren zu erstellen.

p {
  ~ img {
  }
}
/* This is parsed by the browser as */
p ~ img {
}

Der &-Verschachtelungsselektor kann auch verwendet werden, um komplexe Selektoren zu erstellen:

p {
  & img {
  }
}
/* This is parsed by the browser as */
p img {
}

Hier ist ein Beispiel, das komplexe Selektoren demonstriert:

<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 {
    /* this is parsed by the browser as h1 ~ p */
    font-weight: bold;
    background-color: #333;
    color: #fff;
    padding: 0.5em;
  }
}

Sie können jeden der Selektoren, die wir in vorherigen Lektionen entdeckt haben, mit Kombinatoren kombinieren, um einen Teil Ihres Dokuments auszuwählen. Um beispielsweise Listenelemente mit einer Klasse "a" auszuwählen, die direkte Kinder eines <ul> sind, versuchen Sie Folgendes:

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

Achten Sie jedoch darauf, 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 die Position dieses Elements im Markup gemacht haben.

Es ist oft besser, eine einfache Klasse zu erstellen und diese auf das betreffende Element anzuwenden. Das heißt, Ihr Wissen über Kombinatoren wird sehr nützlich sein, 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.

Sie haben das Ende dieses Artikels erreicht, aber können Sie sich die wichtigsten Informationen merken? Sie finden einige weitere Tests, um zu überprüfen, ob Sie diese Informationen behalten haben, bevor Sie weitermachen — siehe Testen Sie Ihre Fähigkeiten: Selektoren.

Dies ist der letzte Abschnitt unserer Lektionen zu Selektoren. Als nächstes werden wir uns einem weiteren wichtigen Teil von CSS zuwenden — dem Cascade, Spezifität und Vererbung.

• Zurück
• Übersicht: CSS-Bausteine
• Weiter