Attribut Selektoren / Attribut Selectors

Attribut Selektoren sind Teil der CSS2 bzw. CSS3 Spezifikation und werden bis jetzt leider nur von moderneren Browsern wie zb. Firefox interpretiert. Der IE versteht diese Attribut Selektoren leider nicht (allerdings gibt es hier eine Javascriptalternative mit der man das umgehen kann [siehe weiter unten]). Aber wozu braucht man das ganze jetzt eigentlich!? Attribut Selektoren sind enorm powerfull und man kann Dinge damit machen, die man ohne Javascript bis jetzt noch nicht machen konnte.

Die folgenden Beispiele beruhen auf dem Bericht von .Andy Clarke, der es wirklich geschafft hat, diese Attribut Selektoren sinnvoll und einfach zu erklären. Ich hab mich ein bisschen gespielt und noch weitere Beispiele erstellt.

Wie der Name schon sagt beziehen sich Attribut Selektoren auf die Attribute von Elementen. Man kann also diese Attribute (in der nachstehenden Auflistung fett geschrieben) ansprechen und gezielt verändern.
href=”” title=”” ></a><q cite=”” ></q><img src=”” alt=”” /><div id=”” ></div><p ></p>

Ich habe euch eine kleine Beispielseite mit 9 Anwendungsbeispielen dieser Attribut Selektoren erstellt, die glaub ich gut verdeutlichen was man damit alles anstellen kann.
zu den Beispielen / to the Example Page (wie gesagt…nicht für IE User)

Weiterführendes

Natürlich wurden in den Beispielen nicht alle Möglichkeiten ausgeschöpft – unter anderem kann man damit auch noch folgendes machen

• Links mit einer bestimmten URL gesondert stylen
• Stylen von Quotations anhand des cite Attributes
• Stylen von Tabellen anhand eines bestimmten Wortes im Summary Attribut
• Stylen von Headern die zb. nur größer od. kleiner als h3 sind
• uvm.

Wie bereits oben angesprochen, kann der Internet Explorer mit den Attribut Selektoren nichts anfangen. Es gibt jedoch die Möglichkeit diese Attribut Selektoren mit JavaScript anzusprechen und dann funktioniert das unter anderem auch auf dem Internet Explorer.
zu der JavaScript Version

zur W3C Attribut Selector Dokumentation