Join MDN and developers like you at Mozilla's View Source conference, 12-14 September in Berlin, Germany. Learn more at https://viewsourceconf.org

Attributselektoren

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

Spezifikationen

Spezifikation Status Kommentar
Selectors Level 4
Die Definition von 'attribute selectors' in dieser Spezifikation.
Arbeitsentwurf Hat den Modifizierer für ASCII schreibungsunabhängige Attributwertselektierung hinzugefügt.
Selectors Level 3
Die Definition von 'attribute selectors' in dieser Spezifikation.
Empfehlung  
CSS Level 2 (Revision 1)
Die Definition von 'attribute selectors' in dieser Spezifikation.
Empfehlung Ursprüngliche Definition

Browser Kompatibilität

Merkmal Chrome Firefox (Gecko) Internet Explorer Opera Safari
Grundlegende Unterstützung (Ja) 1.0 (1.7 oder früher) 7 9 3
Merkmal Android Chrome für Android Firefox Mobile (Gecko) IE Mobile Opera Mobile Safari Mobile
Grundlegende Unterstützung ? ? 1.0 (1) ? ? ?

Siehe auch

Schlagwörter des Dokuments und Mitwirkende

Schlagwörter: 
 Mitwirkende an dieser Seite: Sebastianz, hansspiess, fscholz, iGadget, J5lx
 Zuletzt aktualisiert von: Sebastianz,