Unterschiedliches CSS3 für verschiedene Links

CSS3 erlaubt es, nicht wie bisher alles Links gleich zu stylen, bzw. diese über eine Klasse zu unterscheiden, sondern Links mit verschiedenen Zielen direkt über Selektoren anzusprechen. In letzter Zeit sieht man immer mehr, dass Links die von der eigenen Seite weg führen zum Beispiel automatisch mit einem zusätzlichen Icon belegt werden. Hier einige einfache Rezepte:

Für alle externen Links:

a[rel="external"]{
     font-size: 1.2em;
}

Links auf E-Mail-Adressen:

a[href^="mailto:"]{
     font-size:1.1em;
}

Links auf Dateien mit bestimmten Dateiendungen:

a[href$=".pdf"]{
     font-size:0.8em;
}
a[href$=".zip"]{
     font-size:0.8em;
}

Beim nächsten Design also ein paar Klassen sparen, die Links direkt ansprechen und evtl. auch mal dran denken das man nicht jedem Link eine Klasse geben muss, sondern das man die Links auch über einen Pfad ansprechen könnte. Inzwischen verfahre ich bei HTML-Umsetzungen nach dem Motto, dass ich maximal einem DIV eine ID gebe, und den Rest im CSS regele.

Ähnliche Beiträge

Initializr – HTML5 Template Generator Nachdem uns derzeit wie blöde Boilerplates um die Ohren geworfen werden stellt sich zu Recht die Frage: welche ist passend für mich, und was mache ich...
CSScomb – Sortieren einer CSS-Datei Die Übernahme von komplexen Seiten dritter ist kein Spaß, aber leider Alltag. In der Regel sieht dieses Szenario bei mir so aus: irgendein Hobby-Frick...
HTML5 & CSS3 – Was funktioniert in welc... HTML5 und CSS3 nähert sich in großen Schritten, und spätestens dann wird sich im Bereich der Webentwickler die Spreu vom Weizen trennen, da beides ebe...
Linkcheck mit CSS3 Bei der HTML-Umsetzung eines Designs werden in der Regel alle Links entweder gar nicht, oder mit einem # versehen. Dies liegt in der Regel daran, das ...

Schreibe einen Kommentar