Attributselektoren

 

Zusammenfassung

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.

Beispiel

/* 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;}
<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>

Specifications

Specification Status Comment
CSS Selectors Level 3 Recommendation  
CSS 2.1 Recommendation  
CSS 1 Recommendation  

Browser compatibility

Feature Chrome Firefox (Gecko) Internet Explorer Opera Safari
Basic support (Yes) 1.0 (1.7 or earlier) 7 9 3
Feature Android Chrome for Android Firefox Mobile (Gecko) IE Mobile Opera Mobile Safari Mobile
Basic support ? ? 1.0 (1) ? ? ?

References

  •  

Schlagwörter des Dokuments und Mitwirkende

Mitwirkende an dieser Seite: J5lx, fscholz
Zuletzt aktualisiert von: fscholz,
Seitenleiste ausblenden