CSS Kochbuch

6.4 Unterschiedliche Linkfarben für bestimmte Teile einer Seite

Problem

Navigation und Haupttext sollen unterschiedliche Stildefinitionen für Links erhalten.

Lösung

Umgeben Sie hierfür die unterschiedlichen Bereiche der Seite mit div-Tags, die je nach Funktion unterschiedliche Werte für das id-Attribut erhalten:

<div id="nav">
 [...]
</div><!-- end -->
<div id="content">
 [...]
</div><!-- end -->

Verwenden Sie Kontext-Selektoren zusammen mit dem ID-Selektor und der LoVe/HAte-Methode aus „6.2 Die typischen Link-Unterstreichungen entfernen (und andere Dekorationen hinzufügen)“, um unterschiedliche Linkstile für die Seitenbereiche zu definieren:

/* Stildefinitionen für Navigationslinks */ #nav a:link { color: blue; } #nav a:visited { color: purple; } /* ...