XML-Know How

Die Selektoren in CSS

Bislang haben wir uns vor allem mit dem Deklarationsblock in CSS beschäftigt, also dem Teil, in dem die eigentlichen typographischen Angaben gemacht werden. Die Deklarationen entsprechen weitestgehend der Herangehensweise, wie wir sie von Layoutprogrammen auch kennen, nämlich der Zuordnung von Werten zu bestimmten typographischen Eigenschaften.

Viel interessanter – und häufig viel zu wenig ausgeschöpft – sind die Möglichkeiten, die der Selektor zu bieten hat. Hier nämlich kommen die Besonderheiten eines XML-Strukturbaumes zum Tragen: Es lassen sich bestimmte Elemente viel präziser ansprechen, als das in den Layoutprogrammen der Fall ist.

Ein einfaches Beispiel soll das verdeutlichen: Eine Grundregel der Typographie besagt, dass Absätze nach Überschriften, Einschüben etc. keinen Erstzeileneinzug erfahren, selbst wenn alle anderen Absätze entsprechend formatiert sind. Um diesen Effekt zu erzielen, ist es in den Layoutprogrammen erforderlich, zwei Absatzformate anzulegen (Absatz_mit_Einzug und Absatz_ohne_Einzug) und dann jedem Absatz das richtige Format zuzuweisen.

In XML (und damit auch in XHTML) geht das sehr viel eleganter: Da der Browser in der Lage ist, den jeweiligen Absatz in Relation zu seiner Umgebung zu identifizieren, lässt sich eine Regel (präziser: ein CSS-Selektor) definieren, der besagt: »Immer, wenn ein Absatz <p> ein unmittelbar nachfolgendes Geschwisterelement zu <h1>, <h2> (…) ist, soll er ohne Erstzeileneinzug dargestellt werden«

Die entsprechende Regel könnte wie folgt lauten (die Kodierung »/* … */« stellt einen Kommentar innerhalb von CSS dar):

Beispiel:

/* Alle Absätze erhalten einen Erstzeileneinzug von 10px */

p{ text-indent: 10px}

/* Absätze, die unmittelbar auf eine Überschrift der Stufe 1 – 3 folgen, erhalten hingegen keinen Erstzeileneinzug */

h1+p, h2+p, h3+p {text-indent: 0px;}

Betrachten wir die Selektoren also etwas genauer. Den einfachsten Selektortyp haben wir schon kennengelernt, nämlich den sogenannten Elementselektor. Hierbei wird schlicht der Name des Elements angegeben, das formatiert werden soll:

p {font-size: 10px;}

Über Kommata lassen sich mehrere Elemente gleichzeitig angeben, auf die die selben Deklarationen angewendet werden sollen:

h1, h2, h3 {color: #00FF38;}

Styling von Klassen und IDs

Sollen nicht Elemente, sondern Klassen (<p class="wichtig">, vgl. Kap. 6.1.5) angegeben werden, wird dem Selektor ein Punkt (ohne Leerzeichen) vorangestellt. Für die Auswahl einer ID (<div id="navigation">) wird dem Selektor ein Nummernzeichen vorangestellt:

Beispiel:

.wichtig {text-decoration: underline;}

#navigation {width: 400px;}

Eine Besonderheit stellt der sogenannte »Universalselektor« dar. Er wird mit einem Sternchen gekennzeichnet. Die ihm zugewiesenen Deklarationen wirken sich auf sämtliche Elemente aus. Dieser Selektor wird in der Regel nur verwendet, um gezielt die Voreinstellungen der Browser hinsichtlich der Innen- und Außenabstände zu überschreiben (sie müssen danach allerdings sämtlich im CSS definiert werden)

Beispiel:

* {padding: 0px;

 margin: 0px}

Kombinatoren

Mit Hilfe von Kombinatoren lassen sich komplexe Abhängigkeiten von Elementen darstellen. Der gebräuchlichste ist hierbei der sogenannte Nachfahr-Kombinator. Er wird durch ein Leerzeichen zwischen den beiden abhängigen Elementen dargestellt.

Der Selektor im nachfolgenden Beispiel liest sich als »alle Absätze <p>, die innerhalb von <div class="zitat"> stehen«:

Beispiel:

div.zitat p {font-size: 0.8em;}

Neben dem Nachfahr-Kombinator (Leerzeichen) sind vor allem noch der Direkten-Nachbar-Kombinator (durch ein Pluszeichen dargestellt) und der Kind-Kombinator (durch ein »>«-Zeichen dargestellt) gebräuchlich. Letzterer unterscheidet sich vom Nachfahr-Kombinator dadurch, dass nur direkte Kindelemente, nicht aber alle Nachfahren des umschließenden Elements ausgewählt werden.

Beispiel:

/* alle Absätze <p>, die unmittelbar auf <h1> folgen */

h1+p {text-indent: 0px;}

/*alle Listenelemente <li>, die direkte Kindelemente von <ul class="navi"> sind */

ul.navi>li {display: inline;}

Pseudoklassen

Eine weitere interessante Möglichkeit des Stylings bieten sogenannte Pseudoklassen. Sie werden durch einen vorangestellten Doppelpunkt gekennzeichnet, danach folgt ein definierter Schlüsselbegriff. Die gebräuchlichsten sind :link, :visited und :hover. Sie wirken wie eine Klasse, sind aber nicht in den Daten als solche ausgezeichnet. Vielmehr sollen sie nur bei bestimmten Zuständen oder Aktionen greifen:

Beispiel:

/* ein unbesuchter Link wird mit a:link formatiert */

a:link {color: green;}

/*ein besuchter Link wird mit a:visited formatiert */

a:visited {color: blue;}

/*ein Link soll sein Aussehen verändern, wenn man mit der Maus darüberfährt: */

a:hover {text-weight: bold;}

Struktur-Pseudoklassen

Des Weiteren gibt es noch sogenannte »Struktur-Pseudoklassen« (z. B. :first-child), und »Struktur-Pseudoelemente« (diese mit »::« gekennzeichnet), die ein Element abhängig von seiner Position in der Struktur auswählen. ::first-line, ::first-letter, ::before und ::after sind hier die wichtigsten Vertreter.

Beispiel:

/* nach jedem Rezept soll automatisch "Guten Appetit!" ergänzt werden */

div.rezept::after {content:"Guten Appetit!"; }

Durch die Kombination all dieser Bestandteile, aus denen ein Selektor aufgebaut werden kann, lassen sich sehr komplexe Regeln für das Styling definieren:

»Der Urheber eines Mottos soll nur sichtbar sein, wenn man mit der Maus über das Motto fährt«:

Beispiel:

<div class="motto">

<p>Es gibt nichts Gutes,<br/>

Außer: Man tut es </p>

<p class="autor">Erich Kästner</p>

</div>

Zugehöriges CSS:

/*zunächst wird der Absatz <p class="autor"> mit display: none unsichtbar geschaltet. Über die Pseudoklasse :hover (beim Elternelement!) wird der Absatz wieder sichtbar (display: block) */

div.motto p.autor {display: none;}

div.motto:hover p.autor {display: block;}