Lange hatten wir nach einer “einfachen” Lösung gesucht um unsere externen Links sowie Mail-Links etc. speziell mit einer kleinen Grafik zu kennzeichnen.

Bsp:
http://www.example.org
mail{at}example.org

Nun sind wir auf die Attribut-Selektoren in CSS3 gestoßen. Mit dem Attribut-Selektor können verschieden Zeichenketten miteinander verglichen werden. Hier mal 4 Beispiele:

• [attribut=wert]: vergleicht den Wert des Attributs auf genaue Übereinstimmung mit der Zeichenkette
• [attribut^=wert]: ^ vergleicht den Wert des Attributs mit dem Anfang der Zeichenkette
• [attribut$=wert]: $ vergleicht den Wert des Attributs mit dem Ende der Zeichenkette
• [attribut~=wert]: ~ vergleicht den Wert des Attributs mit einem durch Leerzeichen getrennten Wort in der Zeichenkette

Wenn wir jetzt also externen Links, Maillinks, ftp-Links, rss-Links, .zip und .pdf Files etc. eine kleine Grafik als (rechten) background mitgeben wollen, nutzen wir nur Beispiel 2 und 3 (vergleichen des Anfangs und des Endes).
Die angegebenen Grafiken sind nur Beispieldateien. Diese müssen natürlich auf die eigenen Icons angepasst werden.

Zuerst formatieren wir also die externen Links http, ftp, wiki, mailto

/*exterer Link*/
a[href^="http:"] { background: url(images/extern.gif) no-repeat right top; padding-right: 13px; }
/*ftp Link*/
a[href^="ftp:"] { background: url(images/ftp.gif) no-repeat right; padding-right: 13px; }
/*wikipedia Link*/
a[href^="http://www.wiki"], a[href^="http://wiki"] { background: url(images/wiki.gif) no-repeat right; padding-right: 13px; }
/*mailto Link*/
a[href^="mailto:"] {background: url(images/mail.gif) no-repeat right; padding-right: 17px;}

Wichtig dabei ist uns, dass die internen von den externen Links unterschieden werden können. Also müssen wir die internen Links “zurück formatieren” (background:none), so dass der User nur bei den “externen Links” die Grafik sieht.

/*interner Link*/
a[href^="http://www.im-tal.net"], a[href^="http://im-tal.net"] { background: none; padding-right: 0; }

Und danach kommen dann die ganzen File-Links dran, als Bsp. haben wir PDF, ZIP und RSS angegeben. Natürlich können sämtliche andere Dateiformate, wie .doc, .xls, .ppt usw. auch überprüft werden.

/*PDF Link*/
a[href$=".pdf"] {background: url(images/pdf.gif) no-repeat right; padding-right: 13px;}
/*ZIP Link*/
a[href$=".zip"] {background: url(images/zip.gif) no-repeat right; padding-right: 13px;}
/*RSS Link*/
a[href$=".rss"], a[href$=".rdf"] {background: url(images/rss.gif) no-repeat right; padding-right: 13px;}

CSS3 ist noch nicht verabschiedet (wird es wohl auch so schnell nicht ), aber die meisten neueren Browser wie FF2+3 und IE7+8 setzen es bereits teilweise/vollständig um.