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

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 ...
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...
jQuery & Single Page Websites Derzeit schwer im Trend sind Single Page Websites. Dies sind sie zwar schon länger, aber die "neuen" Single Page Websites enthalten durchaus einiges a...
Text auf Pfaden mittels CSS3 Brave New World - CSS3 und insbesondere das Canvas-Element machen Dinge möglich, über die man sich früher keine Gedanken machen brauchte. Insbesondere...

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.