CSS3 - Attributselektoren

1. Eigentlich nichts Neues unter der Sonne

Denn Atributselektoren gibt es schon seit CSS2. Und hier hat das W3C auch nur an ein paar Verfeinerungen gearbeitet. Die haben es aber in sich. Ach ja, sie werden von allen modernen Browsern verstanden. Selbst vom IE7! Man glaubt es kaum. Ihr könnte also getrost damit arbeiten.

Leider gibt es meines Wissens nach keine allgemein gültigen Bezeichnungen für das, was ich euch jetzt zeige. Darum habe ich mir selber was in Form kurzer Worte einfallen lassen. Ich denke das ist so am Verständlichsten. Ach ja, wer sich schon mit regulären Ausdrücken auskennt, dem sollte hier einiges bekannt vorkommen.

2. Das Schema

... ist immer dasselbe. Man wählt wie auch immer ein Element aus. Dann kommt das Attribut mit der Verfeinerung und hinter dem Gleichheitszeichen eine Zeichenkette, die man in Anführungszeichen setzen muss.

Element[Attribut+Verfeinerung="Zeichenkette"]

3. "Beginnt"

Hier wird das ^-Zeichen genommen, also das was sich unter der Escape-Taste befindet und nur erreichbar ist, wenn man drauf haut und danach eine andere Taste betätigt. Ist zumindest bei mir so.

a.sprungmarke[id^="anker"]

Hier steuern wir alle Links mit der Klasse sprungmarke an, die über ein id-Attribut verfügen, dessen Wert mit anker beginnt. Es trifft also zum Beispiel auf id="anker_1" oder id="ankerblubb" zu.

3. "Endet"

Dafür gibt es das $-Zeichen. Ist vielleicht sogar symbolisch zu verstehen.

a[href$=".pdf"]
a[href$=".zip"]

Das bezieht sich auf das Ende einer Zeichenkette innerhalb eines Attributs. An den beiden Beispielen seht ihr sehr schön, dass man damit zum Beispiel Formatierungen vornehmen kann, die sich auf den Dateityp eines Links beziehen.

4. "Beinhaltet"

Dass man hier das gute alte Wildcardzeichen * verwendet hat, liegt wohl auf der Hand.

div[class*="content"]

In diesem Fall muss der Wert des gesuchten Attributs die Zeichenkette enthalten. Obiges Beispiel gilt also zum Beispiel für alle <div>-Elemente mit den Klassen text-content, content-left oder text-content-right.

5. "Gelistet"

... in einer Zeichenkette, die durch Leerzeichen getrennte Werte beinhaltet. Klingt kompliziert, ist aber ganz einfach. Das Zeichen dafür ist die Tilde ~.

div[class~="content"]

Im Gegensatz zum vorherigen Beispiel muss content durch Leerzeichen von anderen Werten getrennt sein. Also zum Beispiel content bla, bla content blubb oder blubber content. Ein bla content-left dagegen passt nicht.

6. "Getrennstricht"

OK, das klingt saublöd, aber etwas Kürzeres ist mir nicht eingefallen. Das verwendete Zeichen hierfür ist der "Hochstrich" | links neben dem Y.

div[class|="content"]

Hier muss der gesuchte Wert durch einen beginnenden Trennstrich (-) von anderen Werten abgetrennt sein. Gilt also für text-content aber nicht für content-text.

7. Zusammenfassung

Wie ihr sicher selbst erkannt habt, ergeben sich aus den Verfeinerungen bei den Attributseleketoren völlig neue Möglichkeiten. So lassen sich die sonst notwendigen Klassen-Orgien deutlich eindampfen. Die Details dazu kommen bei den zukünftigen Tutorials.

zurück zum vorherigen Abschnitt weiter zum nächsten Abschnitt