Designer-Logo
Designer-Logo
Überschrift CSS-Kombinatoren

CSS-Selektoren

CSS-Selektoren werden verwendet um HTML-Elemente zu "finden" (oder wählen) die gestylt werden. Man kann CSS-Selektoren in 5 Kategorien unterteilen:
Einfache Selektoren (Elemente basierend auf Name, ID, Klasse auswählen)

Kombinator-Selektoren(Elemente basierend auf einer bestimmten Beziehung zwischen ihnen auswählen)

Pseudoklassenselektoren (Elemente basierend auf einem bestimmten Zustand auswählen)
Pseudoelement-Selektoren (einen Teil eines Elements auswählen und formatieren)
Attributselektoren (Elemente basierend auf einem Attribut oder Attributwert auswählen)
Auf dieser Seite werden die grundlegendsten CSS-Selektoren erläutert.
Ein Kombinator erklärt die Beziehung zwischen den Selektoren.
Ein CSS-Selektor kann mehr als einen einfachen Selektor enthalten. Zwischen den einfachen Selektoren können wir einen Kombinator einfügen.
Es gibt vier verschiedene Kombinatoren in CSS:

Nachkommen-Selektor (Leerzeichen)

Kinderauswahl (>)

benachbarter Geschwisterwähler (+)

allgemeiner Geschwisterwähler (~)

Nachfahrens-Selektor:

Der Nachfahrens-Selektor wählt alle Elemente die Nachfahren eines spezifischen Elementes sind.
Unten ein Beispiel:
Überschrift Nachkommen-Selektor Überschrift Beispiel
<!DOCTYPE html>
<html>
<head>
<style>
main p {
background-color: yellow;
}
</style>
</head>
<body>
<h2>Nachkommen-Selektor</h2>
<p>Der Nachkommen-Selektor wählt alle Elemente die Nachfahren eines spezifischen Elementes sind.</p>
<main>
<p>Absatz 1 in main.</p>
<p>Absatz 2 in main.</p>
<div><p>Absatz 3 in main.</p></div>
</main>
<p>Absatz 4. Nicht in main.</p>
<p>Absatz 5. Nicht in main.</p>
</body>
</html>
Überschrift Kinder-Selektor

Kinder-Selektor:

Der Kinder-Selektor wählt alle Elemente die Kinder eines spezifischen Elementes sind. Das folgende Beispiel wählt alle <p> Elemente die Kinder vom <main> Element sind:
Überschrift Beispiel
<!DOCTYPE html>
<html>
<head>
<style>
main > p {
background-color: yellow;
}
</style>
</head>
<body>
<h2>Kinder-Selektor<h2>
<p>Der Kinder-Selektor (>) wählt alle Elemente alle Kinder-Elemente eines spezifischen Element.</p>
<main>
<p>Absatz 1 in main.</p>
<p>Absatz 2 in main.</p>
<div><p>Absatz 3 in main.</p></div>
<p>Absatz 4 in main.</p>
</main>
<p>Absatz 5 nicht in main.</p>
<p>Absatz 6 nicht in main.</p>
</body>
</html>
Überschrift Nachbar-Selektor

Benachbarter Geschwister-Selektor:

Der benachbarte Geschwister-Selektor wählt alle Elemente die benachbarte Elemente eines spezifischen Elementes sind. Geschwister-Elemente haben das selbe Eltern-Element, benachbart bedeutet "sofort folgend". Das folgende Beispiel wählt alle <p> Elemente welche platziert sind sofort nach dem <main> Element:
Überschrift Beispiel
<!DOCTYPE html>
<html>
<head>
<style>
main + p {
background-color: yellow;
}
</style>
</head>
<body>
<h2>benachbarte Geschwister-Selektor</h2>
<p>Der benachbarte Geschwister-Selektor wählt alle Elemente die benachbarte Elemente eines spezifischen Elementes sind.</p>
<main>
<p>Absatz in main.</p>
<p>Absatz 2 in main.</p>
</main>
<p>Absatz 3. Nicht in main.</p>
<p>Absatz 4. Nicht in main.</p>
</body>
</html>
Überschrift Allgemein-Geschwister Selktoren

Allgemein benachbarter Geschwister-Selektor:

Der allgemein benachbarte Geschwister-Selektor wählt alle Elemente die Geschwister eines spezifischen Element sind. Das folgende Beispiel wählt alle <p> Elemente die Geschwister sind vom <main> Element:
Überschrift Beispiel
<!DOCTYPE html>
<html>
<head>
<style>
main ~ p {
background-color: yellow;
}
</style>
</head>
<body>
<h2>Allgemein benachbarte Geschwister-Selektoren</h2>
<p>Der allgemein benachbarte Geschwister-Selektor (~) wählt alle Elemente die Geschwister eines spezifischen Elementes sind.</p>
<p>Absatz 1.</p>
<main>
<p>Absatz 2.</p>
</main>
<p>Absatz 3.</p>
<code>einiger Code.</code>
<p>Absatz 4.</p>
</body>
</html>
Designer-Logo