Direktnavigation

Weitere Infos

Sie lesen:
LB Teil 1 (2009)

Little Boxes Teil 1 (Cover)

Aktuell (2015)
Einstieg in CSS

Einstieg in CSS (Cover)


2. Auflage!

Einstieg in CSS (Cover)

Inhaltsbereich

9.2 Punktsieg: Spezifität in der Praxis

Im Kapitel über Selektoren haben Sie bereits etwas über Spezifität gelesen. Bei der Gestaltung der Navigationsliste ist dieses Punktesystem in voller Aktion.

margin-bottom für ul

Schauen Sie sich zum Beispiel die Regeln für ul an:

  • ul { margin: 0 0 1em 0; } ist ein einfacher Selektor und bekommt 1 Punkt.
  • #navibereich ul { margin: 0; } ist eine ID plus einfacher Selektor, macht zusammen 101 Punkte.

Mit 101 zu 1 ist #navibereich ul also klarer Punktsieger, und die ungeordnete Liste im Navigationsbereich bekommt keinen margin-bottom.

Die Farbe der Hyperlinks

Bei der Farbe für die Hyperlinks sieht es ähnlich aus:

  • a:link und a:visited bekommen jeweils 11 Punkte: 1 für a und 10 für die Pseudoklasse :link bzw. :visited.
  • Die Deklarationen für #navibereich a haben 101 Punkte und gewinnen.

Die Hyperlinks im Navigationsbereich bekommen also die Schriftfarbe Schwarz.

Feineinstellungen für die Hyperlinks

Wenn Sie mit der Maus über einen Link in der Navigation fahren, werden Sie sehen, dass für den Hover-Effekt immer noch die für a:hover definierte rote Unterstreichung per border-bottom gilt. Diesem Effekt fügen Sie jetzt noch einen roten Hintergrund und weiße Schrift hinzu. Außerdem wird im folgenden ToDo noch ein Style für a:active im Navibereich definiert.

ToDo: Feineinstellungen für die Hyperlinks in der Navigation
  1. Fügen Sie unterhalb des Styles für #navibereich a folgende Regel hinzu:

    #navibereich a:hover,
    #navibereich a:focus {
      color: white;
      background-color: #d90000;
    }
    #navibereich a:active {
      color: black;
      background-color: white;
      border-bottom-color: white;
    }

  2. Speichern Sie das Stylesheet und betrachten Sie die Webseiten im Browser.

Auch diese Einstellungen gelten allesamt aufgrund einer höheren Spezifität gegenüber den Einstellungen für einfache Selektoren in Teil 1 des Stylesheets.