From 4ab365b110f2f1f2b736326b7059244a32115089 Mon Sep 17 00:00:00 2001 From: Florian Merz Date: Thu, 11 Feb 2021 14:45:38 +0100 Subject: unslug de: move --- files/de/web/css/attribute_selectors/index.html | 122 ++++++++++++++++++++++++ 1 file changed, 122 insertions(+) create mode 100644 files/de/web/css/attribute_selectors/index.html (limited to 'files/de/web/css/attribute_selectors') diff --git a/files/de/web/css/attribute_selectors/index.html b/files/de/web/css/attribute_selectors/index.html new file mode 100644 index 0000000000..a4b6449af3 --- /dev/null +++ b/files/de/web/css/attribute_selectors/index.html @@ -0,0 +1,122 @@ +--- +title: Attributselektoren +slug: Web/CSS/Attributselektoren +tags: + - Anfänger + - CSS + - Reference + - Selectors +translation_of: Web/CSS/Attribute_selectors +--- +
{{CSSRef}}
+ +

Übersicht

+ +

Attributselektoren wählen Elemente anhand des Vorhandenseins oder Wertes eines Attributs aus.

+ +
+
[attr]
+
Repräsentiert ein Element mit einem Attribut attr.
+
[attr=wert]
+
Repräsentiert ein Element mit einem Attribut attr, welches exakt den Wert „wert“ enthält.
+
[attr~=wert]
+
Repräsentiert ein Element mit einem Attribut attr, welches eine Liste mit durch Leerraum getrennten Wörtern enthält, von denen eines exakt dem Wert „wert“ entspricht.
+
[attr|=wert]
+
Repräsentiert ein Element mit einem Attribut attr. Es kann exakt den Wert „wert“ enthalten oder mit einem Wert „wert“ beginnen, dem ein „-“ (U+002D) folgt. Es kann benutzt werden, um anhand von Sprachsubcodes Elemente auszuwählen.
+
[attr^=wert]
+
Repräsentiert ein Element mit einem Attribut attr, dessen Wert mit „wert“ beginnt.
+
[attr$=wert]
+
Repräsentiert ein Element mit einem Attribut attr, dessen Wert mit „wert“ endet.
+
[attr*=wert]
+
Repräsentiert ein Element mit einem Attribut attr, dessen Wert mindestens einmal „wert“ enthält.
+
[attr operator wert i]
+
Wenn ein i vor der schließenden Klammer eingefügt wird, wird ein Vergleich ohne Berücksichtigung der Groß-/Kleinschreibung (für Zeichen innerhalb des ASCII Bereichs) durchgeführt.
+
+ +

Beispiele

+ +
/* Alle span-Elemente mit dem „lang“-Attribut sind fett */
+span[lang] {font-weight:bold;}
+
+/* Alle span-Elemente in Portugiesisch sind grün */
+span[lang="pt"] {color:green;}
+
+/* Alle span-Elemente in amerikanischem Englisch sind blau  */
+span[lang~="en-us"] {color: blue;}
+
+/* Alle span-Elemente sowohl in vereinfachtem (zh-CN) als auch traditionellem (zh-TW) Chinesisch sind rot */
+span[lang|="zh"] {color: red;}
+
+/* Alle internen Links haben einen goldenen Hintergrund */
+a[href^="#"] {background-color:gold}
+
+/* Alle Links zu mit „.cn“ endenden URLs sind rot */
+a[href$=".cn"] {color: red;}
+
+/* Alle Links zu URLs, die „beispiel“ enthalten, haben einen grauen Hintergrund */
+a[href*="beispiel"] {background-color: #CCCCCC;}
+
+/* Alle email Eingabefelder haben einen blauen Rahmen */
+/* Das matcht jede Großschreibung von "email", z. B. "email", "EMAIL", "eMaIL", etc. */
+input[type="email" i] {border-color: blue;}
+
+ +
<div class="hallo-beispiel">
+    <a href="http://example.com">English:</a>
+    <span lang="en-us en-gb en-au en-nz">Hallo Welt!</span>
+</div>
+<div class="hallo-beispiel">
+    <a href="#portugiesisch">Portugiesisch:</a>
+    <span lang="pt">Olá Mundo!</span>
+</div>
+<div class="hallo-beispiel">
+    <a href="http://example.cn">Chinesisch (Vereinfacht):</a>
+    <span lang="zh-CN">世界您好！</span>
+</div>
+<div class="hallo-beispiel">
+    <a href="http://example.cn">Chinesisch (Traditionell):</a>
+    <span lang="zh-TW">世界您好！</span>
+</div>
+
+ +

{{EmbedLiveSample('Beispiele', 250, 100)}}

+ +

Spezifikationen

+ + + + + + + + + + + + + + + + + + + + + + + + + + +
SpezifikationStatusKommentar
{{SpecName('CSS4 Selectors', '#attribute-selectors', 'attribute selectors')}}{{Spec2('CSS4 Selectors')}}Hat den Modifizierer für ASCII schreibungsunabhängige Attributwertselektierung hinzugefügt.
{{SpecName('CSS3 Selectors', '#attribute-selectors', 'attribute selectors')}}{{Spec2('CSS3 Selectors')}} 
{{SpecName('CSS2.1', 'selector.html#attribute-selectors', 'attribute selectors')}}{{Spec2('CSS2.1')}}Ursprüngliche Definition
+ +

Browser Kompatibilität

+ +{{Compat("css.selectors.attribute")}} + +

Siehe auch

+ + -- cgit v1.2.3-54-g00ecf