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 (~)
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:
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>
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:
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 (>) 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>
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:
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>
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:
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>
Beispiel :
div p
Beispielbeschreibung:
Wählt alle <p>-Elemente innerhalb von <div>-Elementen aus
Beispiel :
div > p
Beispielbeschreibung:
Wählt alle <p>-Elemente aus, bei denen das übergeordnete Element ein <div>-Element ist
Beispiel :
div + p
Beispielbeschreibung:
Wählt das erste <p>-Element aus, das unmittelbar nach <div>-Elementen platziert wird
Beispiel :
p ~ ul
Beispielbeschreibung:
Wählt jedes <ul>-Element aus, dem ein <p>-Element vorangestellt ist