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

InstaCSS – die Referenz in Sachen CSS3 / HTM... Ich ergehe mich ja nicht oft in Superlativen, aber in Sachen CSS3 / HTML5 Dokumentation besteht mancherorts echt Nachholbedarf. Man bewegt sich dort i...
Respsonsive Design Testing Tool Screenqueri.es Das man heutzutage ein neues Design responsive aufbauen sollte lässt sich wohl nicht mehr weg diskutieren, wie es vielleicht vor einem Jahr noch mögli...
HTML5Rocks – HTML5 und CSS3 von Google Mit HTML5Rocks beglückt uns Google mit einer Art eierlegenden Wollmilchsau für HTML5 & CSS3, der man eine Rosa-Google-Brille angezogen hat. Die Se...
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...

Schreibe einen Kommentar