Selektoren definieren, auf welche Elemente eine Reihe von CSS Regeln angewendet wird.
Grundlegende Selektoren
- Typselektoren
- Dieser grundlegende Selektor wählt alle Elemente aus, die den angegebenen Namen matchen.
Syntax:eltname
Beispiel:input
matcht jedes<input>
Element. - Klassenselektoren
- Dieser grundlegende Selektor wählt Elemente anhand ihres
class
Attributs aus.
Syntax:.classname
Beispiel:.index
matcht jedes Element, das die Klasseindex
besitzt (wahrscheinlich definiert durch einclass="index"
Attribut oder ähnliches). - ID-Selektoren
- Dieser grundlegende Selektor wählt Knoten anhand des Wertes ihres
id
Attributs aus. Es sollte nur ein Element mit der angegebenen ID in einem Dokument geben.
Syntax:#idname
Beispiel:#toc
matcht das Element, das die IDtoc
hat (wahrscheinlich definiert durch einid="toc"
Attribut oder ähnliches). - Universalselektoren
- Dieser grundlegende Selektor wählt alle Knoten aus. Er existiert auch in einer Ein-Namensraum- und einer Alle-Namensräume-Variante.
Syntax:* ns|* *|*
Beispiel:*
matcht alle Elemente des Dokuments. - Attributselektoren
- Dieser grundlegende Selektor wählt Knoten anhand des Wertes eines ihrer Attribute aus.
Syntax:[attr] [attr=value] [attr~=value] [attr|=value] [attr^=value] [attr$=value] [attr*=value]
Beispiel:[autoplay]
matcht alle Elemente, derenautoplay
Attribut (auf einen beliebigen Wert) gesetzt ist.
Kombinatoren
- Angrenzende Geschwisterselektoren
- Der
'+'
-Kombinator wählt Knoten aus, die direkt dem davor angegebenen Element folgen.
Syntax:A + B
Beispiel:h2 + p
matcht jedes<p>
, das direkt einem<h2>
folgt. - Allgemeine Geschwisterselektoren
- Der
'~'
-Kombinator wählt Knoten aus, die dem davor angegeben Element (nicht zwingend direkt) folgen, falls sie sich dasselbe Elternelement teilen.
Syntax:A ~ B
Beispiel:p ~ span
matcht alle<span>
Elemente, die einem<p>
Element innerhalb desselben Elements folgen. - Kindselektoren
- Der
'>'
-Kombinator wählt Knoten aus, die direkte Kinder des davor angegebenen Elements sind.
Syntax:A > B
Beispiel:ul > li
matcht alle<li>
Elemente, die innerhalb eines<ul>
Element sind. - Nachfahrenselektoren
- Der
' '
-Kombinator wählt Knoten aus, die (nicht zwangsweise direkte) Kinder des davor angegebenen Elements sind.
Syntax:A B
Beispiel:div span
matcht jedes<span>
Element, das innerhalb eines<div>
Elements ist.
Pseudoelemente
Pseudoelemente sind Abstraktionen des Baums, die Elemente außerhalb von dem, was HTML macht, repräsentieren. Zum Beispiel hat HTML kein Element, das den ersten Buchstaben oder die erste Zeile eines Absatzes beschreibt, oder die Markierung in einer Liste. Pseudoelemente repräsentieren diese Elemente und erlauben es, ihnen CSS Regeln zuzuweisen: dadurch können diese Elemente unabhängig gestylt werden.
Pseudoklassen
Pseudoklassen erlauben es, Elemente anhand von Informationen auszuwählen, die nicht im Dokumentbaum hinterlegt sind, wie ein Status, oder die schwer zu extrahieren sind. Z. B. ob ein Link zuvor bereits besucht wurde oder nicht.
Spezifikationen
Spezifikation | Status | Kommentar |
---|---|---|
Selectors Level 4 | Arbeitsentwurf | |
Selectors Level 3 | Empfehlung | |
CSS Level 2 (Revision 1) | Empfehlung | |
CSS Level 1 | Empfehlung | Ursprüngliche Definition |
Browser Kompatibilität
Wir konvertieren die Kompatibilitätsdaten in ein maschinenlesbares JSON Format.
Diese Kompatibilitätstabelle liegt noch im alten Format vor,
denn die darin enthaltenen Daten wurden noch nicht konvertiert.
Finde heraus wie du helfen kannst!
Merkmal | Chrome | Firefox (Gecko) | Internet Explorer | Opera | Safari |
---|---|---|---|---|---|
Grundlegende Unterstützung | 1 | 1.0 (1.7 oder früher) | 3.0 | 3.5 | 1.0 |
Merkmal | Android | Firefox Mobile (Gecko) | IE Mobile | Opera Mobile | Safari Mobile |
---|---|---|---|---|---|
Grundlegende Unterstützung | 1.5 | 1.0 (1.9.2) | ? | ? | 3.2 |