CSS-Selektoren und Kombinatoren

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

Der Typ-Selektor wählt alle Elemente aus, die den angegebenen Knotennamen haben. Zum Beispiel wird div alle <div>-Elemente auswählen und input wird jedes <input>-Element treffen. Der Universalselektor, dargestellt durch ein Sternchen (*), ist ein spezieller Typ-Selektor, der alle Elemente auswählt.

Der Klassenselektor wählt alle Elemente aus, die das angegebene class-Attribut haben, das durch den Klassennamen, vorangestellt mit einem Punkt (.), angegeben wird. Zum Beispiel wird .index jedes Element treffen, das class="index" hat. Der ID-Selektor wählt ein Element basierend auf dem Wert seines id-Attributs aus. Der Selektor ist die id, vorangestellt mit einem "Nummernzeichen" (U+0023, #). Zum Beispiel wird #toc das Element treffen, das id="toc" hat. Sowohl class als auch id sind globale Attribute. Es sollte nur ein Element mit einer gegebenen id in einem Dokument geben; aber wenn es mehr als eines gibt, wird der ID-Selektor alle Elemente mit dieser id treffen.

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

CSS

In diesem Beispiel deklarieren wir vier einfache Selektoren und einen zusammengesetzten Selektor mit den vier grundlegenden Selektortypen 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 des Dokumentknotenbaums auszuwählen. Dieses Kombinieren von Selektoren mit Kombinatoren erzeugt komplexe Selektoren.

Der Nachfahrkombinator, dargestellt durch ein oder mehrere Leerzeichen, wählt Knoten aus, die Nachfahren des ersten Elements sind. Zum Beispiel wird div span alle <span>-Elemente treffen, die innerhalb eines <div>-Elements sind.

Der Kindkombinator ist spezifischer als der Nachfahrkombinator. Dargestellt durch das Größer-als-Zeichen (>), wählt der Kindkombinator 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 Nachfahrselektoren ermöglicht CSS auch die Auswahl von Elementen basierend auf ihren Geschwistern. Der nachfolgende Geschwisterkombinator, dargestellt durch eine Tilde (~), wählt Geschwister aus. Angenommen A ~ B, werden alle Elemente, die B entsprechen, ausgewählt, wenn sie von A vorausgegangen werden, vorausgesetzt, sowohl A als auch B teilen denselben übergeordneten Knoten. Zum Beispiel wird h2 ~ p alle <p>-Elemente treffen, die auf ein h2 folgen, unmittelbar oder nicht.

Der nachfolgende Geschwisterkombinator, dargestellt durch das Pluszeichen (+), ist ähnlich wie der nachfolgende Geschwisterkombinator. Jedoch, angenommen A + B, wird es nur B treffen, wenn B unmittelbar von A vorausgegangen wird, wobei beide denselben übergeordneten Knoten teilen. Ergänzend zu unserem vorherigen Beispiel wird h2 + p nur das einzelne <p>-Element treffen, das unmittelbar auf ein <h2>-Element folgt.

Es gibt auch einen Spaltenkombinator, 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 treffen, die zum Bereich der <col> gehören.

Der Namespace-Trenner ist ein weiterer Kombinator, der in der Regel zusammen mit der @namespace-Regel verwendet wird. Dieser Kombinator wird durch ein einzelnes senkrechtes Zeichen (|) dargestellt. Er ermöglicht es, Typ-Selektoren und den Universalselektor auf einen bestimmten Namespace zu beschränken. Zum Beispiel könnte durch die Definition eines Namespace wie @namespace SVG url('http://www.w3.org/2000/svg'); ein Selektor enthalten sein, der nur auf Elemente abzielt, die in einem SVG-Namespace verschachtelt sind. Die Deklaration SVG|a würde Links innerhalb von SVGs und nicht in anderen Teilen des Dokuments treffen. Namespacing kann 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 mit einfachen Selektoren, die mit Kombinatoren kombiniert werden.

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-Verschachtelung definiert werden, mit oder ohne den & Verschachtelungsselektor.

CSS

In diesem Beispiel replizieren wir dieselben fünf relativen Selektoren mit einfachen Selektoren kombiniert mit Kombinatoren, diesmal aber 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 wählen alle Elemente aus, die je nachdem, wie der Selektor geschrieben ist, entweder das gegebene Attribut haben oder das gegebene Attribut mit einem Teilstring-Wertübereinstimmung. Zum Beispiel wird [type] alle Elemente auswählen, die das type-Attribut gesetzt haben (auf jeden Wert), und [type="submit"] wird <input type="submit"> und <button type="submit"> treffen oder jedes Element mit type="submit" gesetzt, auch wenn dieses Attribut-Wert-Paar nur auf <input>- und <button>-Elementen unterstützt wird. Die Übereinstimmung ist nicht case-sensitiv.

Die Groß-/Kleinschreibung des Attributs hängt von der Sprache ab. Im Allgemeinen, in HTML, wenn ein Attribut aufgezählt ist, ist der Wert im Selektor nicht case-sensitiv, selbst wenn der Wert nicht einer 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 aufgezählte Attribute wie class, id oder jedes data-*-Attribut oder für nicht-HTML-Attribute wie role oder aria-*-Attribute, ist die Wertübereinstimmung case-sensitiv; die Übereinstimmung kann mit einem nicht case-sensitiven Modifikator (i) nicht case-sensitiv gemacht werden.

Das CSS-Selektoren-Modul definiert über 60 Pseudo-Klassen. Pseudo-Klassen sind einfache Selektoren, vorangestellt mit einem Doppelpunkt (:), die es ermöglichen, Elemente basierend auf Zustandsinformationen auszuwählen, die nicht im Dokumentenbaum enthalten sind. pseudo-classes können verwendet werden, um ein Element basierend auf seinem Zustand zu stylen. Zum Beispiel zielt der :target einfache Selektor auf ein Element eines URLs mit einem Fragmentidentifier, und der a:visited zusammengesetzte Selektor trifft alle <a>-Elemente, die von einem Benutzer besucht wurden.

Die Pseudo-Klassen können als Anzeigezustand eines Elements, Eingabe, sprachlich, Standort, Ressourcenzustand, zeitdimensionale, Baumstruktur, Benutzeraktion und funktional kategorisiert werden.

Mehrere Pseudo-Klassen können kombiniert werden, um zusammengesetzte Selektoren zu erstellen. Wenn eine Pseudo-Klasse mit einem Typ- oder Universalselektor in einem zusammengesetzten Selektor kombiniert wird, muss die Pseudo-Klasse dem Typ- oder Universalselektor folgen, falls vorhanden.

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

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

• Selektorliste
• Struktur von CSS-Selektoren
• Spezifität
• CSS-Verschachtelungsmodul