Die neuen Selektoren bei CSS 3.0
Eben habe ich mir mal das Kapitel der neuen attributbedingten Selektoren unter CSS 3.0 angeschaut und bin durchaus begeistert. In der Version 2.0 hatte man damit zwar begonnen, aber das Ergebnis war nicht wirklich praxistauglich gewesen. Und so war es vor Jahren noch eine friemelige Angelegenheit, die Adressen von Links im PHP nach möglichen Endungen zu untersuchen (z.B. erscheint bei einem Link auf eine mp3-Datei ein Notensymbol) bzw. interne Links von externen Links zu unterscheiden (bei externen Links erscheint ein kleiner Pfeil). Am Ende wurde diese »Erkenntnis« in Form einer Klasse an den Link drangehangen und im CSS formatiert.
Zu Unterscheidung interner (= keine absoluten Adressen) und externer Links würde nun das reichen:
a[href^="http"]
{ background-image:url(extern.png);
padding-left:9px;
background-position:left bottom;
background-repeat:no-repeat;
}
Die mp3-Datei läßt sich nun so kennzeichnen:
a[href$="mp3"]
{ background-image:url(musiknote.png);
padding-left:9px;
background-position:left bottom;
background-repeat:no-repeat;
}
Funktioniert unter Opera 9 und Firefox 3.
Bisherige Kommentare (3)
Kommentar von Koloradokäfer
Feine Sache. Wusste ich gar nicht, dass man mit CSS Links nach Dateiendungen unterscheiden kann. Sehr praktisch. Ich hätte da für jede Linkart eine extra Klasse gesetzt.
Kommentar von René
Ja, wie gesagt ich bisher auch. Nun wünsche ich mir nur noch RegExp im CSS ;)
Kommentar von Thiemo
Genau das hast du dir vor über drei Jahren schon gewünscht: http://maettig.com/1121247420
Übrigens wäre es präziser, href^="http://" und href$=".mp3" zu schreiben, sonst werden unter Umständen auch interne Links markiert, die zufällig auf eine dieser Zeichenketten passen.
Kommentar verfassen
Bisherige Trackbacks (0)
Es wurde noch kein Trackback empfangen!