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.