Zeit für einen weiteren CSS-Notizbucheintrag: wie ist die korrekte CSS-Formatierung für Links? Das klingt jetzt erst mal vielleicht trivial, aber wenn es so trivial ist, dass man jedes mal die Suchmaschine anwirft, dann wird es eben Zeit für einen Notizbucheintrag…

Also – es geht um folgendes. Ich habe zwei unterschiedliche Links – und die sollen beide unterschiedlich gestaltet sein – unterschiedliche CSS-Anweisungen bekommen. Dazu fügt man dem Link-Tag jeweils eine eigene Klasse zu.

<a href=“#“ class=“class1″>Linktitel1</a>
<a href=“#“ class=“class2″>Linktitel2</a>

Im Prinzip ginge das natürlich auch über eine individuell vergebeme ID – aber in diesem konkreten Fall ging es eigentlich um mehrere Links, die jeweils der einen oder anderen Style-Gruppe zuzuordnen waren. Daher machen wir das also dementsprechend über die class.

Der CSS-Code für die verschiedenen Link-Zustände sieht dann so aus:

<style>
<!--
/* class1 */
 a.class1:link {
  }
 a.class1:visited {
  }
 a.class1:hover {
  }

/* class2 */
 a.class2:link {
  }
 a.class2:visited {
  }
 a.class2:hover {
  }

 //-->
</style>

Da sind jetzt natürlich noch keine Style-Anweisungen eingetragen – aber ich hoffe doch, dass das Prinzip klar ist. Der entscheidende Punkt war für mich auch lediglich festzuhalten, wie denn nun die Style-Anweisungen genau formatiert sein müssen, um auch angezeigt zu werden. Also: wenn man dem Link direkt eine Klasse zuweist kommt die Klasse im CSS direkt an das a – ohne Leerzeichen – gefolgt von den Pseudoklassen für die Zustände hover und active – wieder ohne Leerzeichen.

Das kann zum Beispiel dann praktisch sein, wenn man in einer Navigation einen Link besonders hervorheben möchte. So lassen sich beispielsweise die Links für „Aktuelles“ oder für einen Sprachwechsler „English“ von der übrigen Navigation ganz einfach unterscheiden.