CSS-Selektoren und Kombinatoren
CSS-Selektoren werden verwendet, um ein Muster der Elemente zu definieren, die Sie auswählen möchten, um eine Reihe von CSS-Regeln auf die ausgewählten Elemente anzuwenden. Kombinatoren definieren die Beziehung zwischen den Selektoren. Mithilfe verschiedener Selektoren und Kombinatoren können Sie präzise die gewünschten Elemente basierend auf ihrem Typ, ihren Attributen, ihrem Zustand oder ihrer Beziehung zu anderen Elementen auswählen und gestalten.
Arten von Selektoren
Es gibt über 80 Selektoren und Kombinatoren. CSS-Selektoren können basierend auf dem Typ der Elemente, die sie auswählen können, in folgende Kategorien gruppiert werden.
Basis-Selektoren
Der Typselektor wählt alle Elemente aus, die den angegebenen Knotennamen haben. Zum Beispiel wählt div alle <div>-Elemente aus und input entspricht jedem <input>-Element. Der universelle Selektor, dargestellt durch ein Sternchen (*), ist ein spezieller Typselektor, der alle Elemente auswählt.
Der Klassenselektor wählt alle Elemente aus, die das angegebene class-Attribut haben, wobei der Klassenname mit einem Punkt (.) vorangestellt ist. Zum Beispiel wird .index jedem Element entsprechen, das class="index" hat. Der ID-Selektor wählt ein Element basierend auf dem Wert seines id-Attributs aus. Der Selektor ist die id, die mit einem Doppelkreuz (U+0023, #) vorangestellt ist. Zum Beispiel wird #toc dem Element entsprechen, das id="toc" hat. Sowohl class als auch id sind globale Attribute. Es sollte nur ein Element mit einer gegebenen id in einem Dokument vorhanden sein; aber wenn es mehr als eines gibt, wird der ID-Selektor alle Elemente mit dieser id auswählen.
Wenn ein Typ- oder universeller Selektor mit einem Klassen- oder ID-Selektor kombiniert wird, um einen Komplexen Selektor zu erstellen, muss der Typ- oder universelle Selektor dem Klassen- oder ID-Selektor vorausgehen.
CSS
In diesem Beispiel deklarieren wir vier einfache Selektoren und einen komplexen Selektor unter Verwendung der vier oben beschriebenen grundlegenden Selektor-Typen.
* {
font-style: italic;
}
p {
color: red;
}
.myClass {
text-decoration: underline;
}
#myId {
font-family: monospace;
}
p.myClass#myId {
font-size: 1.5rem;
}
HTML
<p class="myClass" id="myId">I match everything.</p>
<p>I match the universal and type selectors only.</p>
Ergebnis
Kombinatoren
Mithilfe von CSS-Kombinatoren können wir Selektoren kombinieren, um DOM-Knoten basierend auf ihrer Beziehung zu anderen Elementen innerhalb des Dokumentknotenbaums auszuwählen. Dieses Kombinieren von Selektoren mit Kombinatoren erzeugt komplexe Selektoren.
Nachkommen-Kombinator
Der Nachkommen-Kombinator, dargestellt durch eines oder mehrere Leerzeichen, wählt Knoten aus, die Nachkommen des ersten Elements sind. Zum Beispiel wird div span alle <span>-Elemente auswählen, die innerhalb eines <div>-Elements sind.
Kind-Kombinator
Der Kind-Kombinator ist spezifischer als der Nachkommen-Kombinator. Dargestellt durch das Größer-als-Zeichen (>), wählt der Kind-Kombinator Knoten aus, die direkte Kinder des ersten Elements sind. Im Vergleich zu unserem vorherigen Beispiel wird div > span nur die <span>-Elemente auswählen, die direkte Kinder eines <div>-Elements sind.
Nachfolgender-Geschwister-Kombinator
Zusätzlich zu den Nachkommen-Selektoren ermöglicht CSS auch die Auswahl von Elementen basierend auf ihren Geschwistern. Der nachfolgende-Geschwister-Kombinator, dargestellt durch eine Tilde (~), wählt Geschwister aus. Angenommen A ~ B, werden alle Elemente, die B entsprechen, ausgewählt, wenn sie von A vorangegangen werden, vorausgesetzt, sowohl A als auch B teilen denselben Elternteil. Zum Beispiel wird h2 ~ p alle <p>-Elemente auswählen, die einem h2 folgen, sofort oder nicht.
Direktes-Geschwister-Kombinator
Der direkte-Geschwister-Kombinator, dargestellt durch das Pluszeichen (+), ähnelt dem nachfolgenden-Geschwister-Kombinator. Jedoch, bei A + B, wählt es B nur aus, wenn B unmittelbar von A vorangegangen wird, wobei beide denselben Elternteil teilen. Ein Beispiel, bei dem h2 + p nur das einzelne <p>-Element auswählt, das dem <h2>-Element unmittelbar folgt.
Spalten-Kombinator
Es gibt auch einen Spalten-Kombinator, dargestellt durch zwei senkrechte Striche (||), der, wenn unterstützt, Knoten auswählt, die zu einer Spalte gehören. Zum Beispiel wird col || td alle <td>-Elemente auswählen, die zum Geltungsbereich des <col> gehören.
Namensraum-Trenner
Der Namensraum-Trenner ist ein weiterer Kombinator, der im Allgemeinen in Verbindung mit der @namespace at-Regel verwendet wird. Dieser Kombinator wird durch ein einzelnes senkrechtes Strichzeichen (|) dargestellt. Er ermöglicht es, Typselektoren und den universellen Selektor auf einen bestimmten Namensraum zu beschränken. Zum Beispiel, durch Definieren eines Namensraums wie @namespace SVG url('http://www.w3.org/2000/svg');, können Sie Selektoren einfügen, die nur Elemente im SVG-Namensraum ansprechen. Die Deklaration SVG|a würde Links innerhalb von SVGs entsprechen, nicht jedoch jenen im Rest des Dokuments. Namespacing kann nützlich sein, um MathML, SVG oder andere XML-basierte Inhalte innerhalb Ihres HTML gezielt anzusprechen.
CSS
In diesem Beispiel deklarieren wir fünf relative Selektoren unter Verwendung einfacher Selektoren kombiniert mit Kombinatoren.
h2 + p ~ p {
font-style: italic;
}
h2 + p + p {
color: red;
}
.myClass + p {
text-decoration: underline;
}
#myId > .myClass {
outline: 3px dashed red;
}
* > p {
font-size: 1.1rem;
}
HTML
<h2 class="myClass" id="myId">
No selectors match. <span class="myClass">This span has an outline</span> as
it is both myClass and a child of #myId.
</h2>
<p>The first paragraph is underlined. All the paragraphs are 1.1rem.</p>
<p>
The second paragraph is red. This and the following paragraphs are italic.
</p>
<p>The third paragraph is NOT red. It is italic and 1.1rem.</p>
<p class="myClass">
Does not have an outline; this is a sibling of H2, not a child. It is italic
and 1.1rem.
</p>
Ergebnis
Erstellen komplexer Selektoren mit CSS Verschachtelung
Die oben genannten komplexen Selektoren können auch mit einfachen Selektoren, Kombinatoren und CSS Verschachtelung definiert werden, mit oder ohne den & Verschachtelungsselektor.
CSS
In diesem Beispiel replizieren wir die gleichen fünf relativen Selektoren unter Verwendung einfacher Selektoren kombiniert mit Kombinatoren, diesmal jedoch mit CSS-Verschachtelung.
h2 {
& + p {
& ~ p {
font-style: italic;
}
& + p {
color: red;
}
}
}
.myClass {
& + p {
text-decoration: underline;
}
}
#myId {
& > .myClass {
outline: 3px dashed red;
}
}
* {
& > p {
font-size: 1.1rem;
}
}
HTML
<h2 class="myClass" id="myId">
No selectors match. <span class="myClass">This span has an outline</span> as
it is both myClass and a child of #myId.
</h2>
<p>The first paragraph is underlined. All the paragraphs are 1.1rem.</p>
<p>
The second paragraph is red. This and the following paragraphs are italic.
</p>
<p>The third paragraph is NOT red. It is italic and 1.1rem.</p>
<p class="myClass">
Does not have an outline; this is a sibling of H2, not a child. It is italic
and 1.1rem.
</p>
Ergebnis
Attributselektoren
Attributselektoren wählen alle Elemente aus, die je nach Schreibweise des Selektors entweder das angegebene Attribut haben oder das gegebene Attribut mit einem Teilstring-Wert. Zum Beispiel wird [type] alle Elemente auswählen, die das type-Attribut gesetzt haben (auf jeden Wert), und [type="submit"] wird sowohl <input type="submit"> als auch <button type="submit"> oder jedes Element mit type="submit" entsprechend, selbst wenn dieses Attribut-Wert-Paar nur auf <input>- und <button>-Elementen unterstützt wird. Die Übereinstimmung erfolgt ohne Berücksichtigung der Groß- und Kleinschreibung.
Die Groß-/Kleinschreibung des Attributs hängt von der Sprache ab. Allgemein gilt im HTML, wenn ein Attribut aufgezählt wird, ist der Wert im Selektor ohne Berücksichtigung der Groß- und Kleinschreibung, selbst wenn der Wert nicht einer der aufgezählten ist oder wenn das Attribut kein gültiger Wert für das Element ist, auf dem es gesetzt ist. Für nicht aufgezählte Attribute, wie class, id oder jedes data-*-Attribut, oder für nicht-HTML-Attribute, wie role oder aria-*-Attribute, erfolgt die Übereinstimmung unter Berücksichtigung der Groß-/Kleinschreibung; die Übereinstimmung kann mit einem Modifikator ohne Berücksichtigung der Groß-/Kleinschreibung (i) gemacht werden.
Pseudo-Klassen-Selektoren
Das CSS-Selektoren-Modul definiert über 60 Pseudo-Klassen. Pseudo-Klassen sind einfache Selektoren, die mit einem Doppelpunkt (:) vorangestellt sind und die Auswahl von Elementen basierend auf Zustandsinformationen ermöglichen, die nicht im Dokumentbaum enthalten sind. pseudo-classes können verwendet werden, um ein Element basierend auf seinem Zustand zu stylen. Zum Beispiel zielt der einfache Selektor :target auf ein Element einer URL mit einem Fragmentkennung ab, und der a:visited komplexe Selektor entspricht allen <a>-Elementen, die von einem Benutzer besucht wurden.
Die Pseudo-Klassen können in folgende Kategorien eingeteilt werden: Element Anzeigezustand, Eingabe, linguistic, Ort, Ressourcenzustand, zeit-dimensional, baum-strukturellen, Benutzeraktion, und Funktional.
Mehrere Pseudo-Klassen können kombiniert werden, um komplexe Selektoren zu erstellen. Bei der Kombination einer Pseudo-Klasse in einen komplexen Selektor mit einem Typ- oder universellen Selektor muss die Pseudo-Klasse dem Typ-Selektor oder universellen Selektor folgen, falls vorhanden.
Pseudo-Element-Selektoren
Nicht alle CSS-Selektoren sind im CSS-Selektoren-Modul definiert. CSS-Pseudo-Element-Selektoren sind im CSS-Pseudo-Elemente-Modul definiert.
CSS Pseudo-Elemente, mit zwei Doppelpunkten (::) vorangestellt, repräsentieren Entitäten, die nicht in HTML enthalten sind. Zum Beispiel wählt der einfache ::marker-Selektor Aufzählungszeichen der Listenelemente aus, und der komplexe Selektor p::first-line entspricht der ersten Zeile aller <p>-Elemente.
Spezifikationen
| Specification |
|---|
| Selectors Level 4 |
| CSS Pseudo-Elements Module Level 4 |
Siehe die Pseudo-Klassen und Pseudo-Elemente Spezifikationstabellen für Details dazu.