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.
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;
}
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.
<p class="box">Content in the box in my HTML page.</p>
.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:
<p class="box">Content in the box in my HTML page.</p>
.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.
<p class="box">Content in the box in my HTML page.</p>
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: