Selektoren

Klassenselektoren

Der Klassenselektor beginnt mit einem Punkt (.). Er wählt alles im Dokument aus, auf das diese Klasse angewendet wurde.

.highlight {
  background-color: yellow;
}

h1.highlight {
  background-color: pink;
}

.notebox {
  border: 4px solid #666;
  padding: 0.5em;
  margin: 0.5em;
}

.notebox.warning {
  border-color: orange;
  font-weight: bold;
}

.notebox.danger {
  border-color: red;
  font-weight: bold;
}

ID-Selektoren

Der ID-Selektor beginnt mit einem # anstelle eines Punktes und wird auf dieselbe Weise wie ein Klassenselektor verwendet.

#about {
  background-color: yellow;
}

h1#about {
  color: rebeccapurple;
}

Selektorenlisten

Wenn du mehr als eine Sache hast, die dasselbe CSS verwenden, können die einzelnen Selektoren zu einer Selektorenliste kombiniert werden, sodass die Regel auf alle einzelnen Selektoren angewendet wird.

h1,
.special {
  color: blue;
}

Universalselektor

Der universelle Selektor wird durch ein Sternchen (*) angezeigt. Es wählt alles im Dokument aus.

* {
  margin: 0;
  padding: 0;
}

Attributselektoren

Anwesenheits- und Wertselektoren

Diese Selektoren ermöglichen die Auswahl eines Elements basierend auf der blossen Anwesenheit eines Attributs (zum Beispiel href) oder basierend auf verschiedenen Übereinstimmungen mit dem Wert des Attributs.

Selektor	Beispiel	Beschreibung
[attr]	a[title]	Selektiert Elemente mit einem attr Attribut (dessen Name der Wert in eckigen Klammern ist).
[attr=value]	a[href="https://example.com"]	Selektiert Elemente mit einem attr Attribut, dessen Wert genau value ist — der String innerhalb der Anführungszeichen.
[attr~=value]	p[class~="special"]	Selektiert Elemente mit einem attr Attribut, dessen Wert genau value ist oder value in seiner (durch Leerzeichen getrennten) Liste von Werten enthält.
[attr|=value]	div[lang|="zh"]	Selektiert Elemente mit einem attr Attribut, dessen Wert genau value ist oder mit value beginnt, unmittelbar gefolgt von einem Bindestrich.

Teilstringübereinstimmende Selektoren

Diese Selektoren ermöglichen eine fortgeschrittenere Übereinstimmung von Teilstrings innerhalb des Wertes Ihres Attributs.

Selektor	Beispiel	Beschreibung
[attr^=value]	li[class^="box-"]	Selektiert Elemente mit einem attr Attribut, dessen Wert mit value beginnt.
[attr$=value]	li[class$="-box"]	Selektiert Elemente mit einem attr Attribut, dessen Wert mit value endet.
[attr*=value]	li[class*="box"]	Selektiert Elemente mit einem attr Attribut, dessen Wert value irgendwo im String enthält.

Pseudeoklassen und -elemente

Pseudoklassen

Eine Pseudoklasse ist ein Selektor, der Elemente auswählt, die sich in einem bestimmten Zustand befinden, z. B. das erste Element ihres Typs sind oder durch den Mauszeiger berührt werden.

Pseudoklassen sind Schlüsselwörter, die mit einem Doppelpunkt beginnen. Zum Beispiel ist :hover eine Pseudoklasse.

:first-child

Die Pseudoklasse :first-child wählt das erste Kindelement aus.

article p:first-child {
  font-size: 1.2em;
  font-weight: bold;
}

:last-child

Die Pseudoklasse :last-child wählt das letzte Kindelement aus.

article p:last-child {
  font-size: 1.2em;
  font-weight: bold;
}

:only-child

Die Pseudoklasse :only-child wählt ein Element aus, wenn es keine Geschwister hat.

article p:only-child {
  font-size: 1.2em;
  font-weight: bold;
}

:hover

Die Pseudoklasse :hover gilt, wenn ein Nutzer seine Maus über eine Element bewegt, bspw. ein Link oder ein Button.

a:hover {
  color: hotpink;
}

:focus

Die Pseudoklasse :focus gilt, wenn ein Nutzer das Element mit Klicken oder Tastatursteuerungen fokussiert.

a:focus {
  border: 1px solid hotpink;
}

:active

Die Pseudoklasse :active gilt, wenn ein Nutzer das Element anklickt.

a:active {
  background-color: red;
}

:visited

Die Pseudoklasse :active gilt, wenn der Link in der Browserhistorie ist.

a:active {
  background-color: red;
}

Siehe auch: Pseudoklassen

Pseudoelemente

Pseudoelemente verhalten sich auf ähnliche Weise. Sie tun jedoch so, als ob Sie ein ganz neues HTML-Element in das Markup eingefügt hätten, anstatt einer bestehenden Klassen von Elementen eine Klasse zuzuweisen.

Pseudoelemente beginnen mit einem doppelten Doppelpunkt ::. ::first-line ist ein Beispiel für ein Pseudoelement.

Generieren von Inhalt mit Pseudoelementen

Es gibt ein paar spezielle Pseudoelemente, die zusammen mit der content-Eigenschaft verwendet werden, um Inhalte mit CSS in dein Dokument einzufügen.

HTML

<p class="box">Content in the box in my HTML page.</p>

CSS

.box::before {
  content: "This should show before the other content. ";
}

Vor der Box wird jetzt der Text eingefügt. Mit ::after können wir auch Content nach dem Element einfügen. Das Einfügen von Textstrings aus CSS machen wir jedoch nicht oft im Web, da dieser Text für einige Screenreader unzugänglich ist und für jemanden in der Zukunft schwer zu finden und zu bearbeiten sein könnte.

---

Eine sinnvolle Anwendung dieser Pseudoelemente besteht darin, ein Symbol einzufügen, zum Beispiel den kleinen Pfeil, der im folgenden Beispiel hinzugefügt wird, welcher ein visuelles Zeichen ist, das wir nicht von einem Screenreader vorlesen lassen möchten:

HTML

<p class="box">Content in the box in my HTML page.</p>

CSS

.box::after {
  content: " ➥";
}

---

Im nächsten Beispiel haben wir einen leeren String mit dem Pseudoelement ::before hinzugefügt. Wir haben es auf display: block gesetzt, damit wir es mit einer Breite und Höhe gestalten können. Wir verwenden dann CSS, um es wie jedes Element zu stylen.

HTML

<p class="box">Content in the box in my HTML page.</p>

CSS

.box::before {
  content: "";
  display: block;
  width: 100px;
  height: 100px;
  background-color: rebeccapurple;
  border: 1px solid black;
}

Kombinatoren

Descendant-Kombinator

Der Descendant-Kombinator — typischerweise durch ein einzelnes Leerzeichen ( ) dargestellt — kombiniert zwei Selektoren so, dass Elemente, die vom zweiten Selektor übereinstimmen, ausgewählt werden, wenn sie ein Vorfahrenelement (Eltern, Eltern des Elternteils, etc.) haben, das mit dem ersten Selektor übereinstimmt.

Im Beispiel unten stimmen wir nur mit dem <p>-Element überein, das sich innerhalb eines Elements mit einer Klasse von .box befindet.

.box p {
  color: red;
}

Child-Kombinator

Der Child-Kombinator (>) wird zwischen zwei CSS-Selektoren platziert. Er stimmt nur mit den Elementen überein, die direkte Kinder von Elementen sind, die mit dem ersten Selektor übereinstimmen. Nachfahrende Elemente weiter unten in der Hierarchie stimmen nicht überein.

Zum Beispiel, um nur <p>-Elemente auszuwählen, die direkte Kinder von <article>-Elementen sind:

article > p {
  ...
}

Next-Sibling-Kombinator

Der Next-Sibling-Kombinator (+) wird zwischen zwei CSS-Selektoren platziert. Er stimmt nur mit den Elementen überein, die direkt nach dem Element kommen, das mit dem ersten Selektor übereinstimmt.

Zum Beispiel, um alle <img>-Elemente auszuwählen, die unmittelbar von einem <p>-Element vorausgegangen werden:

p + img {
  ...
}

Subsequent-Sibling-Kombinator

Wenn du Geschwister eines Elements auswählen möchtest, auch wenn sie nicht direkt benachbart sind, kannst den Subsequent-Sibling-Kombinator (~) verwenden. Um alle <img>-Elemente auszuwählen, die irgendwo nach <p>-Elementen kommen, würden wir dies tun:

p ~ img {
  ...
}