CSS-Selektoren und Kombinatoren

Es gibt über 80 Selektoren und Kombinatoren. CSS-Selektoren können in die folgenden Kategorien gruppiert werden, basierend auf der Art der Elemente, die sie auswählen können.

Der Typ-Selektor wählt alle Elemente aus, die den angegebenen Knotennamen haben. Zum Beispiel wählt div alle <div>-Elemente aus und input wird mit jedem <input>-Element übereinstimmen. Der Universal-Selektor, der mit einem Sternchen (*) bezeichnet wird, ist ein spezieller Typ-Selektor, der alle Elemente auswählt.

Der Klassen-Selektor wählt alle Elemente aus, die das angegebene class-Attribut haben, das durch den Klassennamen gekennzeichnet ist, der mit einem Punkt (.) vorangestellt ist. Zum Beispiel wird .index mit jedem Element übereinstimmen, 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 „Nummernzeichen“ (U+0023, #) vorangestellt ist. Zum Beispiel wird #toc mit dem Element übereinstimmen, das id="toc" hat. Sowohl class als auch id sind globale Attribute. Es sollte nur ein Element mit einer bestimmten id in einem Dokument geben; falls es mehr als eines gibt, wird der ID-Selektor alle Elemente mit dieser id entdecken.

Wenn ein Typ- oder Universal-Selektor mit einem Klassen- oder ID-Selektor kombiniert wird, um einen zusammengesetzten Selektor zu erstellen, muss der Typ- oder Universal-Selektor dem Klassen- oder ID-Selektor vorausgehen.

CSS

In diesem Beispiel deklarieren wir vier einfache Selektoren und einen zusammengesetzten Selektor, indem wir die vier grundlegenden Selektortypen verwenden, wie oben beschrieben.

* {
  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

Mit CSS-Kombinatoren können wir Selektoren kombinieren, um DOM-Knoten basierend auf ihrer Beziehung zu anderen Elementen innerhalb der Dokument-Knotenstruktur auszuwählen. Dieses Kombinieren von Selektoren mit Kombinatoren erstellt komplexe Selektoren.

Der Nachfahren-Kombinator, der durch ein oder mehrere Leerzeichen bezeichnet wird, wählt Knoten aus, die Nachkommen des ersten Elements sind. Zum Beispiel wird div span alle <span>-Elemente auswählen, die sich innerhalb eines <div>-Elements befinden.

Der Kind-Kombinator ist spezifischer als der Nachfahren-Kombinator. Er wird durch das Größer-als-Zeichen (>) bezeichnet und wählt Knoten aus, die direkte Kinder des ersten Elements sind. Im Vergleich zu unserem vorherigen Beispiel wählt div > span nur die <span>-Elemente aus, die direkte Kinder eines <div>-Elements sind.

Neben Nachfahren-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 mit B übereinstimmenden Elemente ausgewählt, wenn sie von A vorausgegangen werden, vorausgesetzt, dass sowohl A als auch B denselben Elternteil teilen. Zum Beispiel wird h2 ~ p alle <p>-Elemente auswählen, die einem h2 folgen, unmittelbar oder nicht.

Der direkt-nachfolgende-Geschwister-Kombinator, bezeichnet durch das Plus-Symbol (+), ist dem nachfolgenden-Geschwister-Kombinator ähnlich. Allerdings wird in A + B nur B ausgewählt, wenn B unmittelbar A folgt, wobei beide denselben Elternteil haben. Anknüpfend an unser vorheriges Beispiel wird h2 + p nur das einzelne <p>-Element auswählen, das unmittelbar einem <h2>-Element folgt.

Es gibt auch einen Spalten-Kombinator, der durch zwei senkrechte Striche (||) dargestellt wird und Knoten auswählt, die zu einer Spalte gehören, wenn er unterstützt wird. Zum Beispiel wird col || td alle <td>-Elemente erfassen, die zum Umfang der <col> gehören.

Der Namensraum-Trenner ist ein weiterer Kombinator, der im Allgemeinen in Verbindung mit der @namespace-Regel verwendet wird. Dieser Kombinator wird durch ein einzelnes senkrechtes Zeichen (|) dargestellt. Er ermöglicht es, Typ-Selektoren und den Universal-Selektor auf einen spezifischen Namensraum zu begrenzen. Zum Beispiel, indem ein Namensraum definiert wird, wie @namespace SVG url('http://www.w3.org/2000/svg');, können Sie Selektoren einbeziehen, die nur auf im SVG-Namensraum verschachtelte Elemente abzielen. SVG|a würde beispielsweise Links innerhalb von SVGs und nicht diejenigen im Rest des Dokuments erfassen. Namensräume können nützlich sein, um MathML, SVG oder andere XML-basierte Inhalte innerhalb Ihres HTML zu adressieren.

CSS

In diesem Beispiel deklarieren wir fünf relative Selektoren unter Verwendung von einfachen Selektoren in Kombination 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

Die oben beschriebenen 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 dieselben fünf relativen Selektoren unter Verwendung einfacher Selektoren, die mit Kombinatoren kombiniert werden, 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

Attribut-Selektoren wählen alle Elemente aus, die, abhängig davon, wie der Selektor geschrieben ist, entweder das gegebene Attribut aufweisen oder das gegebene Attribut mit einem Teilstringwert-Matching haben. Zum Beispiel wird [type] alle Elemente auswählen, die das type-Attribut gesetzt haben (auf einen beliebigen Wert), und [type="submit"] wird <input type="submit"> und <button type="submit"> oder jedes Element mit type="submit" erfassen, obwohl dieses Attribut-Wert-Paar nur auf <input>- und <button>-Elementen unterstützt wird. Der Abgleich ist Groß-/Kleinschreibung-unabhängig.

Die Groß-/Kleinschreibungsempfindlichkeit des Attributs hängt von der Sprache ab. Im Allgemeinen ist in HTML, wenn ein Attribut aufzählbar ist, der Wert im Selektor Groß-/Kleinschreibung-unabhängig, selbst wenn der Wert keiner der aufgezählten Werte ist oder wenn das Attribut keinen gültigen Wert für das Element aufweist, 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 ist der Wertabgleich Groß-/Kleinschreibung-empfindlich; der Abgleich kann durch einen Groß-/Kleinschreibung-unabhängigen Modifikator (i) unabhängig gemacht werden.

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 erlauben, 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 :target-Einfach-Selektor auf ein Element in einer URL mit einem Fragmentidentifikator ab, und der a:visited-zusammengesetzte Selektor stimmt mit allen <a>-Elementen überein, die von einem Benutzer besucht wurden.

Die Pseudo-Klassen können in Kategorien wie Elementanzeigezustand, Eingabe, linguistisch, Ort, Ressourcenzustand, zeitdimensional, baumstrukturell, Benutzeraktion und funktional unterteilt werden.

Mehrere Pseudo-Klassen können kombiniert werden, um zusammengesetzte Selektoren zu erstellen. Beim Kombinieren einer Pseudo-Klasse in einen zusammengesetzten Selektor mit einem Typ- oder Universal-Selektor muss die Pseudo-Klasse dem Typselektor oder Universal-Selektor folgen, falls vorhanden.

Nicht alle CSS-Selektoren sind im CSS-Selektoren-Modul definiert. CSS-Pseudo-Element-Selektoren sind im CSS-Pseudo-Elemente-Modul definiert.

CSS-Pseudo-Elemente, vorangestellt mit zwei Doppelpunkten (::), repräsentieren Einheiten, die nicht in HTML enthalten sind. Zum Beispiel wählt der einfache ::marker-Selektor die Aufzählungszeichen von Listenelementen aus und der zusammengesetzte Selektor p::first-line trifft auf die erste Zeile aller <p>-Elemente zu.

• Selektorenliste
• CSS-Selektorstruktur
• Spezifität
• CSS-Verschachtelungsmodule