CSS-Kombinatoren


Inhaltsverzeichnis

    Inhaltsverzeichnis anzeigen


CSS-Kombinatoren

Ein Kombinator ist etwas, das die Beziehung zwischen den Selektoren erklärt.

Ein CSS-Selektor kann mehr als einen einfachen Selektor enthalten. Zwischen dem Einfachen Selektoren können wir einen Kombinator einbinden.

Es gibt vier verschiedene Kombinatoren in CSS:

  • Nachkommenselektor (Leerzeichen)

  • Kinderauswahl (>)

  • Nachbar-Geschwister-Selektor (+)

  • allgemeiner Geschwisterselektor (~)


Nachkommen-Selektor

Der Nachkommenselektor gleicht alle Elemente ab, die Nachkommen eines angegebenen Elements sind Element.

Das folgende Beispiel wählt alle <p>-Elemente innerhalb von <div>-Elementen aus:

Beispiel

div p {
  background-color: yellow;
}

Probieren Sie es selbst aus →

<!DOCTYPE html>
<html>
<head>
<style>
div p {
  background-color: yellow;
}
</style>
</head>
<body>

<h2>Descendant Selector</h2>

<p>The descendant selector matches all elements that are descendants of a specified element.</p>

<div>
  <p>Paragraph 1 in the div.</p>
  <p>Paragraph 2 in the div.</p>
  <section><p>Paragraph 3 in the div.</p></section>
</div>

<p>Paragraph 4. Not in a div.</p>
<p>Paragraph 5. Not in a div.</p>

</body>
</html>



Kinderauswahl (>)

Der untergeordnete Selektor wählt alle Elemente aus, die die untergeordneten Elemente von a sind angegebenes Element.

Im folgenden Beispiel werden alle <p>-Elemente ausgewählt Kinder eines <div> Element:

Beispiel

div > p {
  background-color: yellow;
}

Probieren Sie es selbst aus →

<!DOCTYPE html>
<html>
<head>
<style>
div > p {
  background-color: yellow;
}
</style>
</head>
<body>

<h2>Child Selector</h2>

<p>The child selector (&gt;) selects all elements that are the children of a specified element.</p>

<div>
  <p>Paragraph 1 in the div.</p>
  <p>Paragraph 2 in the div.</p>
  <section>
    <!-- not Child but Descendant -->
    <p>Paragraph 3 in the div (inside a section element).</p>
  </section>
  <p>Paragraph 4 in the div.</p>
</div>

<p>Paragraph 5. Not in a div.</p>
<p>Paragraph 6. Not in a div.</p>

</body>
</html>




Auswahl für benachbarte Geschwister (+)

Der benachbarte Geschwisterselektor wird verwendet, um ein Element auszuwählen, das direkt ist nach einem anderen spezifischen Element.

Geschwisterelemente müssen dasselbe übergeordnete Element haben und „benachbart“ bedeutet „sofort folgend“.

Das folgende Beispiel wählt das erste <p>-Element aus, das unmittelbar nach <div>-Elementen platziert wird:

Beispiel

div + p {
  background-color: yellow;
}

Probieren Sie es selbst aus →

<!DOCTYPE html>
<html>
<head>
<style>
div + p {
  background-color: yellow;
}
</style>
</head>
<body>

<h2>Adjacent Sibling Selector</h2>

<p>The + selector is used to select an element that is directly after another specific element.</p>
<p>The following example selects the first p element that are placed immediately after div elements:</p>

<div>
  <p>Paragraph 1 in the div.</p>
  <p>Paragraph 2 in the div.</p>
</div>

<p>Paragraph 3. After a div.</p>
<p>Paragraph 4. After a div.</p>

<div>
  <p>Paragraph 5 in the div.</p>
  <p>Paragraph 6 in the div.</p>
</div>

<p>Paragraph 7. After a div.</p>
<p>Paragraph 8. After a div.</p>

</body>
</html>



Allgemeine Geschwisterauswahl (~)

Der allgemeine Geschwisterselektor wählt alle Elemente aus, die nächste Geschwister eines angegebenen Elements sind.

Das folgende Beispiel wählt alle <p>-Elemente aus, die nächste Geschwister von <div>-Elementen sind:

Beispiel

div ~ p {
  background-color: yellow;
}

Probieren Sie es selbst aus →

<!DOCTYPE html>
<html>
<head>
<style>
div ~ p {
  background-color: yellow;
}
</style>
</head>
<body>

<h2>General Sibling Selector</h2>

<p>The general sibling selector (~) selects all elements that are next siblings of a specified element.</p>

<p>Paragraph 1.</p>

<div>
  <p>Paragraph 2.</p>
</div>

<p>Paragraph 3.</p>
<code>Some code.</code>
<p>Paragraph 4.</p>

</body>
</html>




Alle CSS-Kombinator-Selektoren

element element

Beispiel :

div p

Beispielbeschreibung:

Wählt alle <p>-Elemente innerhalb von <div>-Elementen aus

element>element

Beispiel :

div > p	

Beispielbeschreibung:

Wählt alle <p>-Elemente aus, bei denen das übergeordnete Element ein <div>-Element ist

element+element

Beispiel :

div + p	

Beispielbeschreibung:

Wählt das erste <p>-Element aus, das unmittelbar nach <div>-Elementen platziert wird

element1~element2

Beispiel :

p ~ ul	

Beispielbeschreibung:

Wählt jedes <ul>-Element aus, dem ein <p>-Element vorangestellt ist