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

99 Login-Screens als PSD Login-Screens sind wohl das am meistens vernachlässigte Thema im Bereich der Backend-Entwicklung, dabei gibt es inzwischen recht schöne Möglichkeiten ...
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...
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 ...
Isometrie und CSS3 Isometrie ist/war ein beliebter Mechanismus in Online-Spielen, um sich diverse Probleme hinsichtlich Perspektive und Schatten vom Hals zu schaffen. Du...

Schreibe einen Kommentar

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