Eine Besonderheit an diesem Beispiel sind die Attributselektoren aus der CSS Spezifikation.
Attributselektoren filtern HTML-Elemente nach Attributen – oder auch nach Zeichenketten in Attributen – oder sie finden Elemente, wenn ein Attribut mit einer bestimmten Zeichenfolge beginnt – z.B. a[href^=”https”] – alle Links, die mit https beginnen.
Diese ist zwar noch nicht Standard, jedoch werden diese von Firefox, SeaMonkey, Safari und IE7 unterstützt. Insofern ist das Risiko, dass diese Spezifikationen nicht in die endgültige Version von CSS-3 übernommen werden relativ gering.
Inzwischen sind die Eigenschaften Standard und können problemlos verwendet werden.
<!DOCTYPE html>
<html>
<head>
<style>
a[href^="http:"] {
padding-right:10px;
background: url(link.gif) no-repeat center top;
min-height:75px;
display: block;
}
a[href^="http://www.xy.de"], a[href^="http://xy.de"]{
padding-right:0;
background-image:none;
min-height:75px;
display: block;
}
a[href^="mailto:"] {
padding-right:10px;
background: url(mail.gif) no-repeat center top;
min-height:75px;
display: block;
}
</style>
</head>
<body>
<h1>Attributselektoren</h1>
<p>Attributselektoren - 3 Beispiele </p>
<a href="http://www.testlink.de">Testlink</a>
<a href="http://www.xy.de">Testlink</a>
<a href="mailto:email@example.com">E-Mail senden.></a>
</body>
</html>Einige Joomla Templates die ich erstellt habe, arbeiten mit diesen Selektoren, ich weise aber ausdrücklich darauf hin, das nicht alle Browser diese vollumfänglich korrekt darstellen.
