We're looking for a user researcher to understand the needs of developers and designers. Is this you or someone you know? Check out the post: https://mzl.la/2IGzdXS

Ü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

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 (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,