From 4b1a9203c547c019fc5398082ae19a3f3d4c3efe Mon Sep 17 00:00:00 2001 From: Peter Bengtsson Date: Tue, 8 Dec 2020 14:41:15 -0500 Subject: initial commit --- files/de/web/css/css_selectors/index.html | 153 ++++++++++++++++++++++++++++++ 1 file changed, 153 insertions(+) create mode 100644 files/de/web/css/css_selectors/index.html (limited to 'files/de/web/css/css_selectors') diff --git a/files/de/web/css/css_selectors/index.html b/files/de/web/css/css_selectors/index.html new file mode 100644 index 0000000000..1b0966e479 --- /dev/null +++ b/files/de/web/css/css_selectors/index.html @@ -0,0 +1,153 @@ +--- +title: CSS Selectors +slug: Web/CSS/CSS_Selectors +tags: + - CSS + - CSS Selektoren + - Referenz + - Selectors + - Selektoren + - Übersicht +translation_of: Web/CSS/CSS_Selectors +--- +
{{CSSRef}}
+ +

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 {{HTMLElement('input')}} Element.
+
Klassenselektoren
+
Dieser grundlegende Selektor wählt Elemente anhand ihres class Attributs aus.
+ Syntax: .classname
+ Beispiel: .index matcht jedes Element, das die Klasse index besitzt (wahrscheinlich definiert durch ein class="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 ID toc hat (wahrscheinlich definiert durch ein id="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, deren autoplay 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 {{HTMLElement('p')}}, das direkt einem {{HTMLElement('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 {{HTMLElement('span')}} Elemente, die einem {{HTMLElement('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 {{HTMLElement('li')}} Elemente, die innerhalb eines {{HTMLElement('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 {{HTMLElement('span')}} Element, das innerhalb eines {{HTMLElement('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

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
SpezifikationStatusKommentar
{{SpecName('CSS4 Selectors')}}{{Spec2('CSS4 Selectors')}}
{{SpecName('CSS3 Selectors')}}{{Spec2('CSS3 Selectors')}}
{{SpecName('CSS2.1', 'selector.html')}}{{Spec2('CSS2.1')}}
{{SpecName('CSS1')}}{{Spec2('CSS1')}}Ursprüngliche Definition
+ +

Browser Kompatibilität

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + +
MerkmalChromeFirefox (Gecko)Internet ExplorerOperaSafari
Grundlegende Unterstützung1{{CompatGeckoDesktop("1")}}3.03.51.0
+
+ +
+ + + + + + + + + + + + + + + + + + + +
MerkmalAndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Grundlegende Unterstützung1.5{{CompatGeckoMobile("1.9.2")}}{{CompatUnknown}}{{CompatUnknown}}3.2
+
-- cgit v1.2.3-54-g00ecf