CSS-Selektoren und Kombinatoren

Es gibt über 80 Selektoren und Kombinatoren. CSS-Selektoren können basierend auf der Art 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 wählt div alle <div>-Elemente aus und input wird auf jedes <input>-Element zutreffen. Der universelle Selektor, dargestellt 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 haben, das durch den Klassenname mit einem Punkt (.) vorangestellt ist. Zum Beispiel wird .index auf jedes Element zutreffen, das class="index" hat. Der ID-Selektor wählt ein Element basierend auf dem Wert seines id-Attributs aus. Der Selektor ist die id mit einem "Nummernzeichen" (U+0023, #) vorangestellt. Zum Beispiel wird #toc das Element auswählen, das id="toc" hat. Sowohl class als auch id sind globale Attribute. Es sollte nur ein Element mit einer gegebenen id in einem Dokument existieren; 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 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 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 im Knotenbaum des Dokuments auszuwählen. Diese Kombination von Selektoren mit Kombinatoren erstellt komplexe Selektoren.

Der Nachfahr-Kombinator, dargestellt 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 Nachfahr-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.

Zusätzlich zu Nachfahrselektionen ermöglicht CSS auch die Auswahl von Elementen basierend auf ihren Geschwistern. Der Nachfolgender-Geschwister-Kombinator, dargestellt durch eine Tilde (~), wählt Geschwister aus. Gegeben A ~ B, werden alle Elemente, die B entsprechen, ausgewählt, wenn sie von A vorausgegangen sind, vorausgesetzt, sowohl A als auch B teilen denselben Elternelement. Zum Beispiel wird h2 ~ p alle <p>-Elemente auswählen, die einem h2, unmittelbar oder nicht, folgen.

Der nächster-Geschwister-Kombinator, dargestellt durch das Plus-Symbol (+), ist ähnlich wie der Nachfolgender-Geschwister-Kombinator. Jedoch, gegeben A + B, entspricht es nur B, wenn B unmittelbar von A vorausgegangen wird, wobei beide denselben Elternelement teilen. Zu unserem vorherigen Beispiel hinzugefügt, wird h2 + p nur das einzelne <p>-Element auswählen, das unmittelbar einem <h2>-Element folgt.

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 Bereich der <col> gehören.

Der Namensraum-Trennzeichen ist ein weiterer Kombinator, der allgemein in Verbindung mit der @namespace at-Regel verwendet wird. Dieser Kombinator wird durch ein einzelnes senkrechtes Zeichen (|) dargestellt. Er ermöglicht die Einschränkung von Typ-Selektoren und dem universellen Selektor auf einen bestimmten Namensraum. Zum Beispiel, durch die Definition eines Namensraums wie @namespace SVG url('http://www.w3.org/2000/svg');, können Sie Selektoren einbeziehen, die nur auf im SVG-Namensraum verschachtelte Elemente abzielen. Die Deklaration SVG|a würde Links innerhalb von SVGs und nicht jene im Rest des Dokuments treffen. Die Namensraum-Unterteilung kann nützlich sein, um MathML, SVG, oder andere XML-basierte Inhalte innerhalb Ihres HTMLs anzuvisieren.

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

CSS

In diesem Beispiel wiederholen wir dieselben fünf relativen Selektoren, indem wir einfache Selektoren kombiniert mit Kombinatoren verwenden, 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 wählen alle Elemente aus, die, abhängig davon, wie der Selektor geschrieben ist, entweder das angegebene Attribut haben oder das angegebene Attribut mit einem Teilstring-Wert entsprechen. Zum Beispiel wird [type] alle Elemente auswählen, die das Attribut type gesetzt haben (auf beliebigen Wert), und [type="submit"] wird <input type="submit"> und <button type="submit"> oder jedes Element mit type="submit" entsprechen, obwohl dieses Attribut-Wert-Paar nur auf <input> und <button>-Elementen unterstützt wird. Die Übereinstimmung ist nicht groß-/kleinschreibungsempfindlich.

Die Groß-/Kleinschreibungsempfindlichkeit des Attributs hängt von der Sprache ab. Generell, in HTML, wenn ein Attribut aufgezählt ist, ist der Wert im Selektor nicht groß-/kleinschreibungsempfindlich, 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 groß-/kleinschreibungsempfindlich; die Übereinstimmung kann mit einem groß-/kleinschreibungunempfindlichen Modifikator (i) nicht groß-/kleinschreibungsempfindlich gemacht werden.

Das CSS-Selektoren Modul definiert über 60 Pseudo-Klassen. Pseudo-Klassen sind einfache Selektoren, die mit einem Doppelpunkt (:) vorangestellt sind, die die Auswahl von Elementen basierend auf Informationszuständen ermöglichen, die nicht im Dokumentbaum enthalten sind. pseudo-classes kann verwendet werden, um ein Element basierend auf seinem Zustand zu stylen. Zum Beispiel zielt der einfache Selektor :target auf das Element einer URL, die eine Fragmentkennung enthält, und der a:visited zusammengesetzte Selektor trifft auf alle <a>-Elemente zu, die von einem Benutzer besucht wurden.

Die Pseudo-Klassen können in Kategorien wie Elementanzeigezustand, Eingabe, linguistisch, Ort, Ressourcenzustand, Zeitdimension, Baumstruktur, Benutzeraktion, und funktional eingeteilt werden.

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

Nicht alle CSS-Selektoren sind im CSS-Selektoren-Modul definiert. CSS-Pseudoelement-Selektoren sind im CSS-Pseudoelemente Modul definiert.

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

• Selektorliste
• CSS-Selektorenstruktur
• Spezifität
• CSS-Nesting-Modul