CSS-Selektoren und Kombinatoren

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

Der Typ-Selektor wählt alle Elemente aus, die den angegebenen Knoten-Namen aufweisen. Zum Beispiel wird div alle <div>-Elemente und input jedes <input>-Element auswählen. Der universelle Selektor, gekennzeichnet durch ein Sternchen (*), ist ein spezieller Typ-Selektor, der alle Elemente auswählt.

Der Klassen-Selektor wählt alle Elemente aus, die das angegebene class-Attribut besitzen, gekennzeichnet durch den Klassennamen mit einem vorangestellten Punkt (.). Zum Beispiel wird .index jedes Element auswählen, das class="index" hat. Der ID-Selektor wählt ein Element basierend auf dem Wert seines id-Attributs aus. Der Selektor wird durch das id mit einem vorangestellten "Nummernzeichen" (U+0023, #) angegeben. Zum Beispiel wird #toc das Element auswählen, welches id="toc" hat. Sowohl class als auch id sind globale Attribute. Es sollte nur ein Element mit einem bestimmten id in einem Dokument geben; wenn es jedoch mehr als eines gibt, wird der ID-Selektor alle Elemente mit diesem id auswählen.

Wenn ein Typ- oder universeller Selektor mit einem Klassen- oder ID-Selektor kombiniert wird, um einen zusammengesetzten 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 zusammengesetzten Selektor mithilfe der vier Arten von Basis-Selektoren, 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

Mithilfe von CSS-Kombinatoren können wir Selektoren kombinieren, um DOM-Knoten basierend auf ihrer Beziehung zu anderen Elementen innerhalb des Dokumentknotenbaums auszuwählen. Diese Kombination von Selektoren mit Kombinatoren erzeugt komplexe Selektoren.

Der Nachfahren-Kombinator, gekennzeichnet durch eines oder mehrere Leerzeichen, wählt Knoten aus, die Nachfahren 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. Mit dem 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.

Zusätzlich zu Nachfahren-Selektoren ermöglicht CSS auch die Auswahl von Elementen basierend auf ihren Geschwistern. Der nachfolgende-Geschwister-Kombinator, gekennzeichnet durch eine Tilde (~), wählt Geschwister aus. Bei A ~ B werden alle Elemente, die B entsprechen, ausgewählt, wenn sie von A vorangegangen werden, vorausgesetzt, dass beide das gleiche Elternteil haben. Zum Beispiel wird h2 ~ p alle <p>-Elemente auswählen, die einem h2 folgen, direkt oder nicht.

Der direkt-nachfolgende-Geschwister-Kombinator, gekennzeichnet durch das Pluszeichen (+), ähnelt dem nachfolgenden-Geschwister-Kombinator. Jedoch wird bei A + B nur B ausgewählt, wenn B direkt von A vorangegangen wird und beide dasselbe Elternteil haben. In Bezug auf unser vorheriges Beispiel wird h2 + p nur das <p>-Element auswählen, das direkt einem <h2>-Element folgt.

Es gibt auch einen Spalten-Kombinator, gekennzeichnet durch doppelte 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 Kontext des <col> gehören.

Das Namensraum-Trennzeichen ist ein weiteres Kombinator, das allgemein in Verbindung mit der @namespace-Regel verwendet wird. Es wird durch ein einzelnes senkrechtes Strich-Zeichen (|) dargestellt. Es ermöglicht die Einschränkung von Typ-Selektoren und des universellen Selektors auf einen spezifischen Namensraum. Zum Beispiel, wenn ein Namensraum wie @namespace SVG url('http://www.w3.org/2000/svg'); definiert wurde, kann man Selektoren erstellen, die nur auf Elemente im SVG-Namensraum abzielen. Die Deklaration SVG|a würde Links innerhalb von SVGs auswählen, aber nicht die im Rest des Dokuments. Namespaces können nützlich sein, um MathML-, SVG- oder andere XML-basierte Inhalte innerhalb von HTML gezielt anzusprechen.

CSS

In diesem Beispiel deklarieren wir fünf relative Selektoren, indem wir einfache Selektoren mit Kombinatoren kombinieren.

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 genannten komplexen Selektoren können auch mit einfachen Selektoren, Kombinatoren und CSS-Nesting mit oder ohne den &-Nesting Selektor definiert werden.

CSS

In diesem Beispiel replizieren wir die gleichen fünf relativen Selektoren unter Verwendung einfacher Selektoren kombiniert mit Kombinatoren, dieses Mal jedoch mit CSS-Nesting.

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 ein bestimmtes Attribut haben oder deren Attributwert mit einem gegebenen Substring übereinstimmt, je nachdem, wie der Selektor geschrieben ist. Zum Beispiel wird [type] alle Elemente auswählen, die das type-Attribut gesetzt haben (auf jeden beliebigen Wert), und [type="submit"] wird sowohl <input type="submit"> als auch <button type="submit"> oder jedes Element mit type="submit" auswählen, obwohl dieses Attribut-Wert-Paar nur bei <input>- und <button>-Elementen unterstützt wird. Der Abgleich ist nicht scharf auf Groß-/Kleinschreibung.

Die Groß-/Kleinschreibung eines Attributs hängt von der Sprache ab. Im Allgemeinen ist in HTML, wenn ein Attribut enumeriert ist, der Wert im Selektor nicht Groß-/Kleinschreibungs-sensitiv, selbst wenn der Wert keiner der aufgezählten Werte ist oder wenn das Attribut kein gültiger Wert für das Element ist, auf dem es gesetzt ist. Für nicht-enumerierte Attribute wie class, id oder data-*-Attribute oder für nicht-HTML-Attribute wie role oder aria-*-Attribute ist der Wertevergleich Groß-/Kleinschreibungs-sensitiv; der Abgleich kann durch einen Groß-/Kleinschreibung-ignorierenden Modifikator (i) nicht Groß-/Kleinschreibungs-sensitiv gemacht werden.

Das CSS-Selektoren-Modul definiert über 60 Pseudo-Klassen. Pseudo-Klassen sind einfache Selektoren, die mit einem Doppelpunkt (:) versehen 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 selektiert der :target-einfache Selektor das Element einer URL mit einem Fragmentbezeichner, und der a:visited zusammengesetzte Selektor wählt alle <a>-Elemente aus, die von einem Benutzer besucht wurden.

Pseudo-Klassen können kategorisiert werden als Anzeigestatus des Elements, Eingabe-Pseudo-Klassen, linguistische, Lokationsbezogene, Ressourcenstatus, zeitdimensional, baumstrukturell, Nutzeraktion und funktional.

Es können mehrere Pseudo-Klassen kombiniert werden, um zusammengesetzte Selektoren zu erstellen. Wenn eine Pseudo-Klasse in einen zusammengesetzten Selektor mit einem Typ- oder universellen Selektor kombiniert wird, muss die Pseudo-Klasse dem Typ- oder universellen 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, die mit zwei Doppelpunkten (::) beginnen, repräsentieren Entitäten, die nicht in HTML enthalten sind. Zum Beispiel wählt der einfache ::marker-Selektor Aufzählungszeichen und der zusammengesetzte Selektor p::first-line die erste Zeile aller <p>-Elemente aus.

• Selektorenliste
• CSS-Selektorstruktur
• Spezifität
• CSS-Nesting-Modul