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

50 CSS3 Button Sets Der Trick ist ja der folgende: Je mehr CSS3, desto weniger Grafiken zum nachladen, desto schneller die Seite. Allerdings (und das muss man ganz klar s...
Webflow – komplettes CSS3 für Seiten online ... CSS3 Online-Editoren gibt es ja einige in der Cloud. Meistens sind diese für spezialisierte Anwendungen wie zum Beispiel Gradients oder Buttons. Will ...
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...
Automatoon – HTML5 Animationen Deluxe Bei meinem ersten Besuch auf Automatoon gab es ein ziemliches auf und ab, angefangen bei "Das kann ja jeder" über "Wie haben sie das bloss gemacht" bi...

Schreibe einen Kommentar