Weitere Infos

Sie lesen:
LB1 (2009)

Little Boxes Teil 1 (Cover)

Diese Website ist von 2009 und wird nicht mehr gepflegt. Die Informationen sind zum großen Teil also wirklich veraltet.

Aktuelle Infos finden Sie hier:

Inhaltsbereich

6.3 Nur in diesem Bereich: Selektoren verschachteln

Die Verschachtelung von Selektoren ist eine sehr nützliche Sache und wird in der Praxis ausgiebig eingesetzt, denn sie ermöglicht es, Elemente nur in einem bestimmten Bereich der Seite zu gestalten.

Nur die Hyperlinks im Textbereich: #textbereich a

Schauen Sie sich im folgenden ToDo die CSS-Regel etwas genauer an, insbesondere die Selektoren am Anfang.

ToDo: Hyperlinks wieder unterstreichen, aber nur im Textbereich
  1. Fügen Sie am Ende des Stylesheets folgende CSS-Regel ein:

    div#textbereich a {
      border-bottom: 1px dotted #cc0000;
    }
    div#textbereich a:hover,
    div#textbereich a:focus {
      border-bottom: 1px solid #d90000;
    }

  2. Speichern Sie das Stylesheet und betrachten Sie die Webseiten in einem Browser.

Die beiden Selektoren div#textbereich und a werden durch eine Leerstelle getrennt. Diese Regel betrifft somit nur Hyperlinks, die in einer div-Kiste mit dem Attribut id="textbereich" stehen. Alle anderen Hyperlinks auf der Webseite sind davon nicht betroffen.

In der ersten Regel bekommt der Link statt der normalen Unterstreichung eine 1 Pixel dicke, gepunktete (dotted) Rahmenlinie, die im zweiten Style bei Mausberührung zu einer durchgezogenen Linie wird.

IE6 macht Striche …

Der Internet Explorer bis inklusive V6 kennt das dotted nicht und nimmt stattdessen dashed. Das ist nicht ganz so hübsch, hat ansonsten aber keinerlei Risiken oder Nebenwirkungen.

Schriftgestaltung für den Slogan im Kopfbereich

In diesem Abschnitt soll das Wort »Grundlagen« im Kopfbereich rot eingefärbt werden. Der Trick dabei ist – wie so oft – der Selektor zur Auswahl des Elements. Erinnern Sie sich noch an das span aus der HTML-Einführung (im Buch auf Seite 82)? Das kommt jetzt zur Geltung.

Falls Ihnen das span nicht mehr ganz gegenwärtig ist, hier noch einmal kurz der etwas verkürzte HTML-Quelltext für den Kopfbereich:

<div id="kopfbereich">
<h1><img src="logo.gif" ... /></h1>
<p>Webseiten gestalten mit HTML und CSS. <span>Grundlagen.</span></p>
</div>

Das folgende ToDo gestaltet nur das Wort »Grundlagen«, wobei der verschachtelte Selektor noch eine Stufe verschachtelter ist als im vorherigen Beispiel.

ToDo: Das Wort »Grundlagen« im Slogan rot hervorheben
  1. Schreiben Sie die folgenden Styles ans Ende von bildschirm.css:
    div#kopfbereich p span {
      color: #d90000; /* Schriftfarbe */
    }
  2. Speichern Sie das Stylesheet und betrachten Sie die Webseiten im
    Browser.

Der Selektor #kopfbereich p span wählt nur das Wort »Grundlagen« aus. Und so sieht der fertige Kopfbereich im Browser aus: 

Abbildung 6.1: Das Wort "Grundlagen" wird rot hervorgehoben
Abbildung 6.1: Das Wort "Grundlagen" wird rot hervorgehoben

Aufzählungszeichen in ungeordneten Listen gestalten: ul li

Ein anderes Beispiel: Sie möchten statt der üblichen runden Aufzählungszeichen gerne quadratische verwenden. Um das zu erreichen, schreiben Sie:

li { list-style-type: square; }

Auf den ersten Blick scheint alles okay zu sein, und Aufzählungen mit ul bekommen tatsächlich ein kleines Quadrat. li ist aber ein einfacher Typ-Selektor und selektiert alle Kisten vom Typ li, und so bekommt eine Nummerierung (ol) statt einer Zahl ebenfalls ein kleines Quadrat. Oops. Eine Lösung bietet auch hier die Verschachtelung von Selektoren:

ul li { list-style-type: square; }

Dieser Selektor beschränkt das Wirkungsgebiet der quadratischen Aufzählungszeichen auf ungeordnete Listen.

Unterschiedliche Nummerierung bei geordneten Listen

Die Verschachtelung von Selektoren ist nicht auf eine Ebene begrenzt. Um Ihnen einen kleinen Vorgeschmack auf die Möglichkeiten zu geben, hier ein Beispiel zur Nummerierung von Listen:

ol li { list-style-type : decimal; }
ol ol li { list-style-type : lower-alpha; }

Die mit den obigen beiden Styles gestalteten nummerierten Listen sehen übrigens so aus:

Abbildung 6.2: Unterschiedliche Nummerierung in geordneten Listen
Abbildung 6.2: Unterschiedliche Nummerierung in geordneten Listen
Andere Namen für verschachtelte Selektoren

Verschachtelte Selektoren werden in anderen Quellen auch als Nachfahrenselektor (engl.: descendant) oder als kontextuelle (engl.: contextual) Selektoren bezeichnet.