Links-zu-Dateitypen-optisch-kenntlich-machen

Links zu Dateitypen optisch kenntlich machen – CSS3 Attributselektoren

CSS3 gibt uns die Möglichkeit, gezielter auf den Wert eines Attributes zuzugreifen. So kann ich dann diesem Attribut in der CSS individuelle Eigenschaften zuweisen. Das Spielfeld wurde ja schön eröffnet, in meinem Beitrag CSS3 – externe Links darstellen hatte ich diese Möglichkeit genutzt, um interne Links herauszufiltern, bzw. interne von externen Links zu unterscheiden.

Natürlich gibt es noch viele weitere Anwendungsmöglichkeiten in der Verwendung von Attributselektoren, im Internet gibt es hierzu viele Anregungen, eine davon möchte ich heute ausprobieren: Links zu bestimmten Dateitypen unterschiedlich darstellen bzw. optisch kenntlich machen.

Hier vorab nocheinmal kurz die neuen Zugriffsmöglichkeiten:

  • [ATTR=“css3″] – der Wert des Attributes enspricht genau der Zeichenkette „css3″ (als Beispiel title=“css3“)
  • [ATTR^=“start“] – der Wert des Attributes beginnt mit genau der Zeichenkette „start“ (als Beispiel title=“Startzeit“)
  • [ATTR$=“ende“] – der Wert des Attributes endet mit genau der Zeichenkeitte „ende“ (als Beispiel title=“Wochenende“)
  • [ATTR*=“lau“] – der Wert des Attributes enthält irgendwo die Zeichenkeitte „lau“ (als Beispiel title=“Urlaub“)

Weiterlesen

CSS3 – externe Links darstellen

Wenn du auf deiner Seite Links, die zu externen Webseiten führen, kenntlich machen möchtest, kannst du den CSS3 Attribut-Selektor dafür verwenden. Attribut-Selektoren gibt es zwar schon seit CSS level 2, neu sind aber die Zugriffsmöglichkeiten auf die Werte der Attribute mit „beginnt mit“ (^), „enthält“ (*), „endet“ ($))

a[href]:after {
content: “ \2197 EXTERN“;
font-size: 8px;
}

Zuerst wird nach allen Links mit dem Attribut „href“ gesucht und Ihnen in diesem Beispiel ein Unicode Sonderzeichen (hier Pfeil nach rechts oben) plus Text „EXTERN“ angefügt.

Weiterlesen