class/id Selectors

Wie schon bereits im letzten Kapitel angekündigt, gibt es noch zwei weitere Arten von Selectoren: Class und ID Selectoren. Beide Selectoren erlauben es - unabhängig von HTML-Tags - bestimmten Objekten Styles hinzuzufügen.

So ist es möglich, in einer Webseite gewisse Passagen eines Textes kursiv zu formatieren und dazu folgende Style-Definition notieren, welche allerdings alle Absätze kursiv formatiert (und nicht nur die gewünschten).

P { font-style: italic; }

Mit Hilfe des Class Selectors lassen sich bestimmte Absätze so markieren, dass nur sie kursiv erscheinen.

Class Selector

Um nur diese Absätze zu formatieren, müssen Sie zuerst den Absatz Tag ein wenig abändern und folgendes Attribut hinzufügen:

<P class="hinweis">Lorem ipsum dolor sit amet, consectetueradipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrudexercitation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.</P>
<P>Duis autem vel eum iriur e dolor in hendrerit in vulputate velit esse molestie consequat, <SPAN class="hinweis">vel illum dolore eu feugiat nulla facilisis at vero eros</SPAN> et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.</P>

Dabei wird die Klasse “hinweis” auf den ersten Absatz und einen Teilbereich im zweiten Absatz (mit Hilfe des SPAN-Tags) angewandt. Diese Klasse muss in der Stylesheet-Definition folgendermaßen definiert werden:

.hinweis { font-style: italic; }

Dem frei wählbaren Klassennamen steht immer ein Punkt voran.

Jedes Element, welches diesen Klassennamen trägt, wird so kursiv formatiert.

Eine weitere Möglichkeit ist die folgende Kombination:

P.hinweis { font-style: italic; }

Dadurch wird beim folgenden Text nur der erste Absatz kursiv formatiert, wohingegen der Teilbereich im zweiten Absatz nicht mehr kursiv ist (der SPAN-Tag ist kein Absatz).

Um die einzelnen Selectoren spezieller zu gestalten, können Sie das Stylesheet um den folgenden Eintrag erweitern:

P.hinweis { font-style: italic; }
SPAN.hinweis { font-weight: bold; }

In diesem Fall wird der erste Absatz kursiv, der SPAN-Bereich hingegen fett.

Als abschließendes Beispiel notieren Sie folgendes Stylesheet:

.hinweis { font-style: italic; }
SPAN.hinweis { font-weight: bold; }

Der erste Absatz wird somit kursiv, der SPAN-Bereich im zweiten Absatz wird sowohl kursiv wie auch fett.

ID Selector

Die Verwendung von ID Selectoren hat in vielen Fällen die gleiche Wirkung wie Class Selectoren. Der erste Unterschied zum Class Selector liegt in der Notation: Ein ID Selector beginnt immer mit einer Raute (#) statt eines Punktes wie beim Class Selector. Ein gültiger ID Selector könnte so aussehen:

#hinweisabsatz { font-style: italic; }

So wird jedes Element, dessen ID-Attribut den Wert “hinweisabsatz” trägt, kursiv formatiert.

Im folgenden Beispiel wird der erste Absatz kursiv, der Zweite hingegen nicht speziell formatiert.

<P id="hinweisabsatz">Der erste Absatz, der kursiv formatiert ist.</P>
<P>Der zweite Absatz, der nicht speziell formatiert wird.</P>

Bislang könnten Sie (zu Recht) fragen, warum dieser ID Selector überhaupt existiert. Die Antwort darauf finden Sie in den folgenden Zeilen, ebenso wie die Erläuterung von Pseudo-Klassen und Pseudo-Elementen.

Class und ID Selector - Unterschiede

Nachdem Sie die Class und ID Selectoren kennen gelernt haben und diese auch für gleiche Zwecke benutzt haben, taucht die Frage auf, was eigentlich der Unterschied zwischen diesen beiden Selectoren ist.

Im Gegensatz zu Class Selectoren, die beliebig vielen Elementen zugeordnet werden können, kann ein ID Selector nur einem einzigen Element im HTML-Dokument zugewiesen werden. Die meisten Browser machen hier aber keinen Unterschied, beachten auch mehrfach vorkommende IDs und formatieren das Element der Definition der ID entsprechend.

Ein weiterer, wichtiger Unterschied ist das Gewicht bzw. der Stellenwert von IDs gegenüber Klassen. ID Selectoren haben ein höheres Gewicht als Klassen. Warum dies so ist, wird später im Tutorial erläutert.

H1 {
color: blue;
font-style: italic;
}

#wichtig {
background: yellow;
color: red;
}

Alle Überschriften sind in der Farbe Blau und kursiv gehalten, nur die Überschrift mit der ID “wichtig” wird in Rot und mit einem gelben Hintergrund dargestellt. Dabei werden die Eigenschaften der ersten Stylesheet-Definition weiterhin auf die zweite Überschrift vererbt: Die “wichtige” Überschrift ist - wie alle anderen Überschriften kursiv.

Pseudo-Klassen und Pseudo-Elemente

Neben den bisher bekannten Selectoren existieren noch weitere sog. Pseudo-Selectoren, die es dem Autor ermöglichen, Formatierungen auf Strukturen der Webseite anzuwenden, die nicht notwendigerweise existieren. Mit anderen Worten werden diese Formatierungen Teilen eines Dokumentes zugewiesen, die nicht auf der Struktur des Dokumentes basieren. Das Ganze mag ein wenig seltsam klingen, aber Sie weisen Formatierungen Elementen zu, die nicht vorhergesagt werden können, aber wenn sie auftauchen diese Eigenschaften annehmen.

Pseudo-Class Selector

Stellen Sie sich ein HTML-Dokument vor, in dem verschiedene Links enthalten sind. Diese Links können entweder auf Seiten verweisen, die bereits besucht wurden oder auf Seiten, die noch nicht besucht wurden. Durch einfaches Betrachten des HTML-Quelltextes ist es nicht möglich herauszufinden, welcher Art (besucht oder nicht besucht) diese Links sind. Diese Unterscheidung macht der Browser, in dem er die URL der Links mit dem Verlauf/der History vergleicht. Browser stellen diese verschiedenen Links dadurch dar, dass sie die Links farblich unterschiedlich formatieren. Nicht besuchte Links werden meist Blau, besuchte Links meist Violett dargestellt. Hier nun eine Möglichkeit diese Darstellung zu ändern:

A.visited { color: yellow; }

<A href="http://www.yahoo.de/" class="visited">Yahoo</A>

Da es zu mühsam wäre, jedem Link diese Klasse hinzuzuordnen, gibt es die folgende Pseudo-Klasse:

A:visited { color: #FFFF00; }

Ohne jedem Link explizit eine Klasse zuzuordnen, werden die Links der besuchten Seiten jetzt grundsätzlich in Gelb dargestellt. Wie im obigen Beispiel gezeigt, werden alle Pseudo-Klassen mit einem Doppelpunkt eingeleitet. Hier ein weiteres Beispiel:

A:visited { color: lime; }
<A href="http://www.google.de/">Google</A><BR>
<A href="http://www.yahoo.de/">Yahoo</A>

Die bereits besuchte Seite “Google” ist hellgrün (”lime”), wohingegen die noch nicht besuchte Webseite “Yahoo” standardmäßig blau ist.

In CSS1 gibt es die drei folgenden Pseudo-Klassen:

Statt dieser Attribute des BODY-Tags können Sie auch das darunter stehende Stylesheet verwenden.

<body link="blue" vlink="purple" alink="red">

A:link { color: blue; }
A:visited { color: purple; }
A:active { color: red; }

Es besteht die Möglichkeit diese Pseudo-Klassen mit dem Class Selector in Verbindung zu bringen:

A.extern:link, A.extern:visited { color: yellow; }

<A href="http://www.meine-webseite.de/">Meine Webseite</A><BR>
<A href="http://www.yahoo.de/" class="extern">Yahoo</A>

Links zu externen Seiten werden so grundsätzlich Gelb dargestellt, ob besucht oder nicht. Alle anderen Links werden weiterhin in den Standardfarben dargestellt.

Pseudo-Element Selector

In CSS1 gibt es zwei Pseudo-Elemente: :first-letter und :first-line. Wie der englische Name schon sagt, beziehen sie sich auf den ersten Buchstaben (:first-letter) und auf die erste Zeile (:first-line).

Damit ist es möglich, die erste Zeile eines jeden Absatzes in Blau darzustellen. Die nötige Definition dazu sieht so aus:

P:first-line { color: blue; }

Mit dem Pseudo-Element Selector :first-letter können Sie außerdem noch - wie oft in Büchern der Fall - den ersten Buchstaben verändern, genauer gesagt vergrößern.

P:first-letter { font-size: 200%; }

Bei der Benutzung dieser beiden Pseudo-Elemente gibt es ein paar Einschränkungen. Nur die folgenden Werte sind bei :first-letter und :first-line Definitionen erlaubt:

Contextual Selectors

Als eine letzte Art von Selectoren gibt es den sog. Contextual Selector.

Stellen Sie sich wieder ein Beispiel vor: In jeder Überschrift sollen kursive Worte eine andere Farbe (Blau) bekommen. Das nötige Stylesheet dazu sieht dann so aus:

H1 I { color: blue; }

Jedes Element in einer H1-Überschrift, welches kursiv ist, erhält die o.a. Eigenschaften.

Sie sind aber nicht an zwei Selectoren gebunden, folgendes Beispiel ist ebenfalls möglich:

UL OL UL I { color: #0000FF; }

Diese sehr spezielle Definition ändert bei allen kursiven Texten die Farbe, die zu einer einfachen Aufzählungsliste gehören, welche zu einer nummerierten Liste gehört. Letztere muss wiederum zu einer einfachen Aufzählungsliste gehören.

Vererbung

Eine wichtige Eigenschaft von CSS ist die Vererbung von Eigenschaften. Bei der folgenden Überschrift wird nicht nur der erste Teil Blau, sondern auch der zweite, kursive Teil. Die Farb-Eigenschaft wird also auf den I-Tag vererbt.

H1 { color: blue; }

<H1>Eine Überschrift <I>mit kursivem Teil</I></H1>

Die Grenzen der Vererbung liegen bei bestimmten Elementen, die nicht vererbt werden, z.B. alle border-, margin-, padding- und background-Eigenschaften.

Specificity

Specificity bedeutet soviel wie “Detail-Level” oder “Reihenfolge” und besagt, welche Definition angewandt wird, falls sich bestimmte Definitionen wie im folgenden Beispiel überschneiden:

.wichtig { color: red; }
H1 { color: blue; }

<H1 class="wichtig">Überschrift <I>mit kursivem Teil</I></H1>

In diesem Beispiel überschreibt die Definition der Klasse den einfachen Selector: die Überschrift wird rot.

Jeder Selector hat einen bestimmten Specificity-Wert:

Vererbte Eigenschaften haben immer 0 als Specificity, d.h. jede andere Definition überschreibt eine vererbte Eigenschaft.

Falls in einem Dokument eine Eigenschaft mit dem STYLE-Tag vergeben wird, hat sie eine sehr hohe Specificity und überschreibt alle anderen Definitionen.

Dazu gibt es allerdings eine einzige Ausnahme: Am Ende einer jeden Eigenschaft können Sie das Wort !important notieren, welches dazu führt, dass diese Regel immer angewandt wird und durch nichts überschrieben werden kann.

P.dunkel {
 color: #333333 !important;
 background: white;
}

Damit wird der Text in einem Paragraphen mit der Klasse “dunkel” immer dunkelgrau.

Soll die Hintergrundfarbe ebenfalls immer weiß sein, muss auch dort die Angabe !important erfolgen:

P.dunkel {
 color: #333333 !important;
 background: white !important;
}