CSS-TIPP: Variable Links

Wenn durch die Gestaltung der Links erkennbar sein soll, welche Art von Datei mit dem Link verknüpft ist, dann lässt sich dies schon mit wenig CSS-Code erreichen. Zur Überprüfung des Links, welche Datei mit ihm verknüpft ist, muss die Endung des Wertes im Parameter auf die Suffixe des Dateinamens untersucht werden. Der CSS-Code:

<HTML-Elementname [Attribut$="textkette"]

Ein Beispiel:

a[href$=".pdf"] {color: green; font-wight: bold;}

In diesem Beispiel werden alle Links zu PDF-Files grün und fett dargestellt.
Der text im a-Tag wird umgestaltet, wenn im href-Parameter die letzten Zeichen des Links .pdf lauten.Ausschlaggebend für in der Codierung ist das $-Zeichen, das duch den CSS-Code den Browser mitteilt, die letzten Zeichen des Wertes auf Übereinstimmung zu prüfen. Soll sich die Überprüfung auf die ersten Zeichen beziehen, wird das $-Zeichen durch das ^-Zeichen ersetzt.
Dummerweise verarbeitet der Internet Explorer diese Eingabe erst ab Version 7 und auch nur dann, wenn der Doctype auf strict gesetzt ist. <- Siehe Kommentar von Kau-Boy.

2 Gedanken zu „CSS-TIPP: Variable Links“

  1. Schöner Artikel. Leider hat er drei kleine Fehler. Zuerst einmal ist das „<" Zeichen am Anfang falsch. Es ist kein gültiges Zeichen und macht den Selektor ungültig. Außerdem darf KEIN Leerzeichen vor der eckigen Klammer und ebenfalls KEIN Leerzeichen zwischen dem „$“ und dem „=“ Zeichen stehen. Der korrekte Ausdruck muss also wie folgt aussehen:


    a[href$=".pdf"] {color: green; font-wight: bold;}

    Der Internet Explorer 7 muss auch nicht im Strict Modus laufen. Auch mit XHTML 1.0 Transitional klappt der Selektor. Probleme hat er nur mit CSS3 Funktionen wie der not() Funktion wie ich es in meinem Artikel Externe Links kennzeichnen mit CSS3 angemerkt habe.

Kommentare sind geschlossen.