CSS Attribute Selectors

Die CSS Attribute Selectors bieten die Möglichkeit, HTML-Elemente anhand Ihrer Attribute zu formatieren. So ist es zum Beispiel möglich mit CSS zwischen externen und internen Links zu unterscheiden und diese dann jeweils anders zu kennzeichen.

Beispiele:

Ein normaler Link wird im stylesheet wie folgt formatiert:

1

a { color:#f00; }

in diesem Beispiel wurde der Link mit der Farbe Rot (#f00) markiert. Will man jetzt z.B. alle Links, die im Attribut target den Wert _blank stehen haben etwas anders kennzeichen funktioniert dies wie folgt:

html:

1

<a href="http://www.example.com" target="_blank">Seite im neuen Fenster öffnen</a>

css:

1

a[target="_blank"] { color:#0f0; }

Es ist z.B. auch möglich E-Mail Links anders zu kennzeichen. Diese haben im Attribut href einen Wert der mit mailto: anfängt:

1

a[href^="mailto:"] { color:#0ff; } /* E-Mail Links Magenta färben */

Weitere Beispiele:

1
2
3
4
5
6
7
8

/* alle Links dessen title-attribute den Wert "quirks-modus" beinhalten Rot färben: */
a[title="quirks-modus"] { color:#f00; } 
 
/* alle Links dessen title-attribute die "quirks-modus" als Begriff beinhalten Rot färben: */
a[href~="quirks-modus"] { color:#f00; } 
 
/* alle Links dessen title-attribute die mit "quirks-modus" anfangen Rot färben: */
a[href^="quirks-modus"] { color:#f00; }