9 Beispiele Attribut Selectors / Attribut Selektoren

#1 Ansprechen eines vorhandenen Attributes

Im ersten Beispiel werden alle Links angesprochen, die über ein title Attribut verfügen! Diese werden mit einer Hintergrundfarbe (rot #900) hinterlegt.

<a href="/" title="Juergen Koller" >Kollermedia.at</a> 
a[title]  { background-color:#900; color:#FFF; }

Austria-Media.at | Pattern4u.tk | Kollermedia.at.

#2 Ansprechen eines speziell definierten Attributes

Um die Sache zu verfeinern kann man auch festlegen, dass nur Links speziell gestylet werden sollen bei denen im title Attribut "kollermedia.at" steht..und sonst nichts.
Hinweis: Immer auf die Groß-Kleinschreibung achten beim Attributinhalt + in den CSS Angaben

<a href="/" title="kollermedia.at" >Kollermedia.at</a>
a[title="kollermedia.at"]  { background-color:#900; color:#FFF; }

Hier steht im title auch Kollermedia.at aber eben nicht nur | Kollermedia.at | Pattern4u.tk

#3 Ansprechen von Attributen bei denen ein gewisses Wort am Beginn steht.

In diesem Beispiel wird nur der Link angesprochen beim das Wort kollermedia.at an erster Stelle im title steht!

<a href="/" title="kollermedia.at steht an erster Stelle" >Kollermedia.at steht an...</a>
a[title^="kollermedia.at"]  { background-color:#900; color:#FFF; }

Kollermedia.at steht an erster Stelle | Hier steht am Ende Kollermedia.at

#4 Ansprechen von Attributen, die ein gewisses Wort am Ende beinhalten

Das umgekehrte Beispiel von #3...in diesem Fall wird nur das titel Attribut angesprochen, bei dem am Ende Kollermedia.at steht.

<a href="/" title="Hier steht am Ende Kollermedia.at" >Hier steht am Ende Kollermedia.at</a>

a[title$="Kollermedia.at"]  { background-color:#900; color:#FFF; }

Kollermedia.at steht an erster Stelle | Hier steht am Ende Kollermedia.at

#5 Ein bestimmtes Wort irgendwo im Attribut

Mit dieser Angabe wird jeder Link angesprochen, der IRGENDWO im title Attribut das Wort kollermedia.at beinhaltet.

<a href="/" title="Oh ja kollermedia.at zeigt wies geht." >Oh ja kollermedia....</a>
a[title*="kollermedia.at"]  { background-color:#900; color:#FFF; }

Oh ja Kollermedia.at zeigt wies geht und der nächste link wird nicht markiert weil ja nicht kollermedia.at im title steht ich bin nicht markiert :(

#6 Sinnvoller Einsatz mit target Attribut

Mithilfe des target Attributes können wir jetzt zb. problemlos einfach alle Links gesondert ansprechen, die in einem neuem Fenster aufgehen (target="_blank")! Das ist äußerst nützlich, da man so ganz simpel externe Links kennzeichnen kann.

<a href="/" target="_blank" >Externer Link</a>
a[target="_blank"]  { background: url(window.gif); usw. }

Externer Link (target="_blank") | Normaler Link

#7 Einsatz bei Image Elemten durch die Verwendung des alt Attributes

Durch diese Attribut Selektoren stehen einem wirklich jede Menge Möglichkeiten offen. So kann man zum Beispiel ganz simpel alle Bilder anders stylen, die ein gewisses Wort im alt-Tag beinhalten oder auch alle die etwas nicht im alt-Tag beinhalten - möglich ist alles.

<img src="thatsme.gif" alt="das bin ich">
img[alt*="ich"]  {  border:2px solid #C93; usw. }

#8 Spezielles styling für links mit bestimmten Filetype

Oft hat man diverse Links, deren Verlinkung zu einem Word Dok oder ein PDF File führt. Mithilfe des href attributes kann ich jedem Link je nach Filetype einen anderen Look verpassen bzw. wie unten zu sehen mit einem netten Icon versehen. Ein Traum oder ;)

<a href="einlinkzueinem.pdf">Ein Link zu einem PDF</a>
<a href="einlinkzueinem.doc">Ein Link zu einem Word Dokument</a>
<a[href=$".pdf"]  {background: url(pdf.gif) no-repeat right; }
<a[href=$".doc"]  {background: url(doc.gif) no-repeat right; }

Ein Link zu einem PDF | Ein Link zu einem Word Dokument

#9 Einsatz bei Listenelementen mithilfe des input type Attribut

Auch, bzw. vor allem bei Formularen kann man diese Attribut Selektoren hervorragend anwenden. Man kann hier ebenfalls nach dem title selektieren oder aber auch zb. mit dem type Attribut wie in diesem Beispiel zu sehen ist. In weiterer Folge könnte man auch problemlos kombinieren und zum Beispiel nur spezielle text types ansprechen in denen ein bestimmtes Wort im title vorkommt.

<input type="radio">
<input type="checkbox">
<input type="text">

input[type="radio"]  { height:20px; width:20px; margin:10px;}
input[type="checkbox"]  {height:20px; width:20px;  margin:10px;}
input[type="text"]  { background-color: #900; color:#FFF; suw}