CSS - Selektoren
Elementselektor
Elementselektoren haben wir bereits kennen gelernt. Wenn alle Überschriften der Ebene 2 eine bestimmte Formatierung erhalten sollen, so schreiben wir einfach h2, d.h. den Elementnamen, für den die Formatierung gelten soll:
h2 { color: red; }
Soll dieselbe Formatierung für mehrere Elemente gelten, so können diese durch Kommata getrennt hintereinander aufgeführt werden:
h2, p { color:red; }
Universalselektor
Wollen wir hingegen alle Elemente auswählen, so können wir den Universalselektor nutzen:
* { color:red; }
Auf diese Art wird als Schriftfarbe für alle Elemente Rot bestimmt.
Klassenselektor
Nicht immer sollen alle Elemente einer Art gleich formatiert werden. So kann es sein, dass manche Absätze anderes als die Standardabsätze gestaltet werden sollen. Hierfür werden Klassen eingesetzt.
Zuerst müssen wir dafür die Absätze, welche eine besondere Formatierung erhalten sollen, mit dem Attribut class kennzeichnen. Als Wert folgt ein Name, den wir uns selbst aussuchen können:
<p class="hervorheben">Lorem ipsum dolor ... </p>
Bei den Stylesheet-Angaben schreiben wir einen Punkt und dann den Klassennamen:
.hervorheben {
background-color: blue;
color: white;
}
So erhalten in im folgendem Beispiel der zweite und der dritte Absatz einen blauen Hintergrund und eine weiße Schrift, die anderen Absätze ohne Klassendefinitionen haben hingegen eine blaue Schrift auf weißem Hintergrund.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
<title>Klassendefinitionen</title>
<style type="text/css">
/* <![CDATA[ */
p {
background-color: white;
color: blue;
}
.hervorheben {
background-color: blue;
color: white;
}
/* ]] */
</style>
</head>
<body>
<h1>Lorem ipsum dolor</h1>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt
ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation
ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. ....</p>
<p class="hervorheben">Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt
ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation
ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. ....</p>
<p class="hervorheben">Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt
ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation
ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. ....</p>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt
ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation
ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. ....</p>
</body>
</html>
Die Klasse hervorheben kann bei beliebigen Elementen zugewiesen werden, beispielsweise auch Überschriften. Wenn sie hingegen nur bei bestimmten Elementen verwendet werden soll, so geben wir das Element vor dem Punkt an.
p.hervorheben { ... }
ID-Selektoren
Ähnlich wie Klassenselektoren funktionieren ID-Selektoren. Anstelle von class schreiben wir das Attribut id und bei den CSS-Angaben wird anstelle des Punkts vor dem id-Namen ein Gatterzeichen notiert.
#wichtig { color: red; }
Dies wird dann einem beliebigen Element zugewiesen z.B.:
<h2 id="wichtig"> ... </h2>
Um die Formatierung auf bestimmte zu beschränken, können wir den Namen des Elements vor dem Gatterzeichen hinzufügen.
h2#wichtig { ... }
Einen wesentlichen Unterschied inhaltlicher Art gibt es zwischen Klassenselektoren und ID-Selektoren. Im Unterschied zu Klassen kennzeichnet eine id ein Element dokumentweit eindeutig, d.h., die id mit einem bestimmten Wert soll innerhalb eines Dokuments nur einmal vorkommen.
id-Selektoren werden zur Kennzeichnung ganzer Bereiche von Webseiten benutzt, denen jeweils eine besondere Formatierung zugewiesen wird.
#navigation { ... }
#inhalt { ... }