CSS 2.1: Attribut-Selektor

Syntax:

Es gibt in CSS 2.1 vier mögliche Formen des Attributselektors:

In der einfachsten Form werden alle Elemente E angesprochen, die ein Attribut 'att' aufweisen. Der den Attributen zugeordnete Wert spielt dabei keine Rolle, es geht nur darum, ob das Attribut vorhanden ist oder nicht.

Regel in CSS:

E[att] { Deklarationen }

Subjekt in HTML:

Der folgende Selektor spricht alle Elemente E an, die ein Attribut 'att' aufweisen, dem exakt der Wert 'val' zugeordnet ist. Wenn man diesen Selektor verwendet, dann muß man darauf achten, dass für einige HTML-Attribute die Groß-/Kleinschrift eine Rolle spielt (z. B. alt und href), in XHTML und XML gilt dies für alle Attribute.

Regel in CSS:

E[att=val] { Deklarationen }

Subjekt in HTML:

In der dritten Form spricht der Selektor alle Elemente an, die ein Attribut 'att' haben. Der Wert des Attributs kann aus mehreren Worten bestehen, die durch Leerzeichen voneinander getrennt sind. Eins dieser Worte muß der Zeichenkette 'val' entsprechen. (Ein Sonderfall dieser Form ist der Klassenselektor.)

Regel in CSS:

E[att~=val] { Deklarationen }

Subjekt in HTML:

Dieser Selektor wurde hauptsächlich im Hinblick auf die im Web üblichen Sprachencodes geschaffen. Er spricht alle Elemente an, die ein Attribut 'att' haben, dessen Wert entweder exakt gleich 'val' ist oder dessen Wert mit der Zeichenkette 'val' und einem direkt darauf folgenden '-' beginnt:

Regel in CSS:

E[att|=val] { Deklarationen }

Subjekt in HTML:

Bedeutung:

Mit Hilfe des Attributselektors lassen sich HTML-Elemente einmal nicht aufgrund des Elementnamens, sondern aufgrund ihrer im Quelltext verankerten Attribute bzw. deren Werten auswählen. Gibt man Werte an, so müssen diese als Zeichenketten notiert werden. Welche Rolle die Groß-/Kleinschrift hierbei spielt, hängt von folgenden Faktoren ab:

Arbeitet man mit HTML, spielt Groß-/Kleinschrift keine Rolle, ebenso wie für die XHTML-DTD transitional und frameset. Wichtig wird sie aber dann, wenn man strict verwendet.
Innerhalb von validen XHTML- Dokumenten dürfen die Namen der Elemente und Attribute nur klein geschrieben werden.
Für die Werte der Attribute in HTML und XHTML sind immer auch Großbuchstaben zugelassen. Dennoch muß die Groß-/Kleinschrift der Werte im HTML- Dokument und im Stylesheet identisch sein.

Es ist möglich, mehrere Attributselektoren in eine Regel einzufassen.

Attributselektoren eignen sich gut dazu, den Inhalt von HTML- Dokumenten relativ schnell nach bestimmten Kriterien zu durchsuchen.

Beispiele:

Das folgende Beispiel dient dazu, beliebige Elemente mit den veralteten Attributen align und bgcolor in einem HTML-Dokument einfacher zu finden, indem man sie farbig darstellt:

*[align][bgcolor] { background-color: #ef0; color: #f00; }
Das folgende Beispiel markiert alle Grafiken, die nicht zugleich ein TITLE-Attribut und ein ALT-Attribut aufweisen, mit einem orange-roten Rahmen. Zusätzlich werden alle (nicht-transparenten) Grafiken, deren Attribut alt leer ist, noch mit einem leuchtgelben Rahmen versehen:

IMG { border: 2px solid #f70; } IMG[alt][title] { border: none; } IMG[alt=""] {padding: 3px; background-color: #ef0; }

Will man sich in einem Dokument alle benannten Anker anzeigen lassen, zeigt dieses Beispiel eine Möglichkeit dazu auf:

A[name] { padding: 5px; border: 2px solid #fd0; }
Im folgenden Beispiel sind zwei Regeln notiert, die beide das darunter dargestellte HTML-Element ansprechen:

P[class~="green"] { Deklarationen } P[class~="blue"] { Deklarationen }

<p class="blue green"> ... </p>

Die vereinfachte Form dieser beiden Regeln sieht so aus (nur in HTML und XHTML!):

P.green { Deklarationen } P.blue { Deklarationen }
Das nächste Beispiel zeigt eine Möglichkeit auf, mehrsprachige Dokumente daraufhin zu untersuchen, ob für alle Elemente die gewünschte Sprache eingestellt ist, basierend auf den Sprachenkürzeln nach RFC 1766 RFC 3282. Alle Elemente, deren Sprache mit 'en' oder 'en-us' oder 'en-au' usw. codiert ist, werden blau ausgegeben. Elemente, deren Sprache mit 'de', 'de-ch' usw. codiert ist, werden rot dargestellt. Elemente in hebräischer Sprache werden grün dargestellt.

*[lang|="en"] { color: #00c; } *[lang|="de"] { color: #c00; } *[lang="he"] { color: #0c0; }
Zum Schluß sei, im Vorgriff auf CSS 3, noch die Möglichkeit aufgezeigt, externen Links eine kleine kennzeichnende Grafik voranzustellen. Da diese Grafik nicht Teil des HTML ist, gibt es auch keine Probleme, sie beim Ausdruck zu unterdrücken (einige Browser beherrschen diesen Selektor bereits):

A:before[href^="http"] {
content: url("/graphics/exlink.gif");
}

Browserunterstützung

Der Attribut-Selektor wird von allen modernen Browsern unterstützt, mit folgender Ausnahme:

IE/Mac 5.x, IE/Win 5.x, IE/Win 6:: Der Microsoft-Browser ist bis zur Version 6 nicht in der Lage, den Attribut-Selektor zu erkennen.
IE 7:: Von Version 7 an kann der IE alle Selektoren verarbeiten.

Eric Meyer's CSS2 Test Suite zeigt am praktischen Beispiel, wie die Browser mit dieser Eigenschaft umgehen.

Keine Eigenschaft und kein Selektor stehen in einem Stylesheet für sich allein. In der Praxis kann das Zusammenspiel zwischen verschiedenen Elementen und Selektoren einen nicht zu unterschätzenden Einfluss auf die Fähigkeiten der Browser haben. Bugs treten oft erst durch das Zusammenwirken mehrerer Eigenschaften an unterschiedlichen Elementen auf.

Besonderheiten im Medientyp `handheld`:

Attribut-Selektoren sind nicht Teil des Standards CSS Mobile Profile 1.0. Mobilgeräte, deren Browser diese Selektoren umsetzen, sind bisher nicht bekannt.