Ü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

Update compatibility data on GitHub
DesktopMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid WebviewChrome für AndroidEdge MobileFirefox für AndroidOpera für AndroidSafari auf iOSSamsung Internet
Grundlegende UnterstützungChrome Vollständige Unterstützung 1Edge Vollständige Unterstützung 12Firefox Vollständige Unterstützung 1IE Vollständige Unterstützung 7Opera Vollständige Unterstützung 9Safari Vollständige Unterstützung 3WebView Android Vollständige Unterstützung JaChrome Android Vollständige Unterstützung JaEdge Mobile Vollständige Unterstützung JaFirefox Android Vollständige Unterstützung 4Opera Android Vollständige Unterstützung JaSafari iOS Vollständige Unterstützung JaSamsung Internet Android Vollständige Unterstützung Ja
Case-insensitive modifier (i)Chrome Vollständige Unterstützung 49Edge Keine Unterstützung NeinFirefox Vollständige Unterstützung 47IE Keine Unterstützung NeinOpera Vollständige Unterstützung 36Safari Vollständige Unterstützung 9WebView Android Vollständige Unterstützung 49Chrome Android Vollständige Unterstützung 49Edge Mobile Keine Unterstützung NeinFirefox Android Vollständige Unterstützung 47Opera Android Vollständige Unterstützung JaSafari iOS Vollständige Unterstützung JaSamsung Internet Android Vollständige Unterstützung 5.0
Case-sensitive modifier (s)
Experimentell
Chrome Keine Unterstützung NeinEdge Keine Unterstützung NeinFirefox Vollständige Unterstützung 66IE Keine Unterstützung NeinOpera Keine Unterstützung NeinSafari Keine Unterstützung NeinWebView Android Keine Unterstützung NeinChrome Android Keine Unterstützung NeinEdge Mobile Keine Unterstützung NeinFirefox Android Vollständige Unterstützung 66Opera Android Keine Unterstützung NeinSafari iOS Keine Unterstützung NeinSamsung Internet Android Keine Unterstützung Nein

Legende

Vollständige Unterstützung  
Vollständige Unterstützung
Keine Unterstützung  
Keine Unterstützung
Experimentell. Das Verhalten kann sich zukünftig ändern.
Experimentell. Das Verhalten kann sich zukünftig ändern.

Siehe auch

Schlagwörter des Dokuments und Mitwirkende

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