CSS-Selektoren und Kombinatoren

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 die folgenden Kategorien gruppiert werden.

Grundlegende Selektoren

Der Typselektor wählt alle Elemente aus, die den angegebenen Knotennamen haben. Zum Beispiel wählt div alle <div>-Elemente aus und input jedes <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, das durch den Klassennamen präfixiert mit einem Punkt (.) dargestellt wird. Zum Beispiel stimmt .index mit jedem Element überein, das class="index" hat. Der ID-Selektor wählt ein Element basierend auf dem Wert seines id-Attributs aus. Der Selektor ist die id präfixiert mit einem „Nummernzeichen“ (U+0023, #). Zum Beispiel stimmt #toc mit dem Element überein, 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 eins gibt, wird der ID-Selektor alle Elemente mit dieser id auswählen.

Beim Kombinieren eines Typ- oder universellen Selektors mit einem Klassen- oder ID-Selektor, 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 unter Verwendung der oben beschriebenen vier grundlegenden Selektortypen.

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

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

Nachfahr-Kombinator

Der Nachfahr-Kombinator, dargestellt durch ein oder mehrere Leerzeichen, wählt Knoten aus, die Nachkommen des ersten Elements sind. Zum Beispiel stimmt div span mit allen <span>-Elementen überein, die sich innerhalb eines <div>-Elements befinden.

Kind-Kombinator

Der Kind-Kombinator ist spezifischer als der Nachfahr-Kombinator. Dargestellt durch das Größer-als-Zeichen (>), wählt der Kind-Kombinator Knoten aus, die direkte Kinder des ersten Elements sind. Verglichen mit unserem vorherigen Beispiel stimmt div > span nur mit den <span>-Elementen überein, die direkte Kinder eines <div>-Elements sind.

Nachfolgender-Geschwister-Kombinator

Zusätzlich zu den Nachfahrselektoren ermöglicht CSS auch die Auswahl von Elementen basierend auf ihren Geschwistern. Der nachfolgende-Geschwister-Kombinator, dargestellt mit einer Tilde (~), wählt Geschwister aus. Gegeben A ~ B, werden alle Elemente, die B entsprechen, ausgewählt, wenn sie von A vorangegangen werden, vorausgesetzt, beide teilen sich denselben Elternteil. Zum Beispiel stimmt h2 ~ p mit allen <p>-Elementen überein, die auf ein h2 folgen, sei es unmittelbar oder nicht.

Direkt-Nachfolgender-Geschwister-Kombinator

Der direkt-nachfolgende-Geschwister-Kombinator, dargestellt durch das Pluszeichen (+), ähnelt dem nachfolgenden-Geschwister-Kombinator. Jedoch, gegeben A + B, stimmt er nur mit B überein, wenn B unmittelbar von A vorangegangen wird und beide denselben Elternteil teilen. In Bezug auf unser vorheriges Beispiel stimmt h2 + p nur mit dem einzelnen <p>-Element überein, das unmittelbar auf ein <h2>-Element folgt.

Spalten-Kombinator

Es gibt auch einen Spalten-Kombinator, dargestellt durch zwei Rohrzeichen (||), der, wenn unterstützt, Knoten auswählt, die zu einer Spalte gehören. Zum Beispiel stimmt col || td mit allen <td>-Elementen überein, die zum Bereich des <col> gehören.

Namespace-Trennzeichen

Der Namespace-Trennzeichen ist ein weiterer Kombinator, der im Allgemeinen in Verbindung mit der @namespace at-rule verwendet wird. Dieser Kombinator wird durch ein einzelnes Rohrzeichen (|) dargestellt. Er ermöglicht das Einschränken von Typselektoren und des universellen Selektors auf einen bestimmten Namespace. Beispielsweise, indem Sie einen Namespace wie @namespace SVG url('http://www.w3.org/2000/svg'); definieren, können Sie Selektoren einfügen, die nur Elemente im SVG-Namespace anvisieren. Das Deklarieren von SVG|a würde Links innerhalb von SVGs anvisieren und nicht die im Rest des Dokuments. Namespacing kann nützlich sein, um MathML, SVG oder andere XML-basierte Inhalte innerhalb Ihres HTML zu anvisieren.

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-Nesting

Die oben genannten komplexen Selektoren können auch unter Verwendung einfacher Selektoren, Kombinatoren und CSS-Nesting, mit oder ohne den &-Nesting-Selektor, definiert werden.

CSS

In diesem Beispiel replizieren wir dieselben fünf relativen Selektoren unter Verwendung einfacher Selektoren kombiniert mit Kombinatoren, aber diesmal 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

Attributselektoren

Attributselektoren wählen alle Elemente aus, die abhängig davon, wie der Selektor geschrieben ist, entweder das gegebene Attribut haben oder das gegebene Attribut mit einem Teilstring-Wertübereinstimmung haben. Zum Beispiel stimmt [type] mit allen Elementen überein, die das type-Attribut gesetzt haben (auf jeden beliebigen Wert), und [type="submit"] wird mit <input type="submit"> und <button type="submit"> übereinstimmen 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 groß- und kleinschreibungsunabhängig.

Die Großschreibungsempfindlichkeit des Attributs hängt von der Sprache ab. Allgemein in HTML, wenn ein Attribut aufzählbar ist, ist der Wert im Selektor nicht groß- und kleinschreibungsempfindlich, 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-aufzählbare Attribute, wie class, id oder jedes data-* Attribut, oder für nicht-HTML Attribute, wie role oder aria-* Attribute, ist die Wertübereinstimmung groß- und kleinschreibungsempfindlich; die Übereinstimmung kann mit einem groß- und kleinschreibungsempfindlichen Modifikator (i) nicht groß- und kleinschreibungsempfindlich gemacht werden.

Pseudo-Klassen-Selektoren

Das CSS-Selektoren Modul definiert über 60 Pseudo-Klassen. Pseudo-Klassen sind einfache Selektoren, die mit einem Doppelpunkt (:) präfixiert sind und die Auswahl von Elementen basierend auf Zustandsinformationen, die nicht im Dokumentbaum enthalten sind, ermöglichen. pseudo-classes können verwendet werden, um ein Element basierend auf seinem Zustand zu stylen. Zum Beispiel zielt der einfache :target Selektor Elemente einer URL mit einem Fragmentbezeichner an, und der a:visited zusammengesetzter Selektor stimmt mit allen <a>-Elementen überein, die von einem Benutzer besucht wurden.

Die Pseudo-Klassen können kategorisiert werden als Elementanzeigestatus, Eingabe, linguistisch, Verortung, Ressourcenzustand, zeitdimensional, strukturell im Baum, Benutzeraktion und funktional.

Mehrere Pseudo-Klassen können kombiniert werden, um zusammengesetzte Selektoren zu erstellen. Wenn eine Pseudo-Klasse in einen zusammengesetzten Selektor mit einem Typ- oder universellen Selektor integriert wird, muss die Pseudo-Klasse dem Typselektor oder dem universellen Selektor folgen, sofern 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 (::) präfixiert, stellen Entitäten dar, die nicht in HTML enthalten sind. Zum Beispiel wählt der einfache ::marker Selektor Listenpunkte aus, und der zusammengesetzte Selektor p::first-line stimmt mit der ersten Zeile aller <p>-Elemente überein.

Spezifikationen

Sehen Sie sich die Pseudo-Klassen und Pseudo-Elemente Spezifikationstabellen für Details dazu an.

Siehe auch

• Selektorliste
• CSS-Selektor-Struktur
• Spezifität
• CSS-Nesting-Modul