04 Selektoren

Die Selektoren legen fest, auf welche Elemente ein Style angewendet werden soll.

Elementselektoren

Dieser Style gilt für genau dieses Element.

h1 { color: green; }
color setzt hier die Schriftfarbe des Elementes h1 auf den Wert grün.
body { background-color: gray; }
background-color setzt die Hintergrundfarbe des ganzen Dokuments auf den Wert grau.

Gruppenselektoren

Style gilt für eine Reihe von Elementen. Die einzelnen Selektoren sind durch Kommas getrennt.

h2, h3 { color:gray; }
zeigt die Elemente h2 und h3 in grau an.

Kontextsensitive Selektoren

Style gilt für ein Element, wenn es innerhalb eines anderen Elementes liegt.

h1 { color: red; } h1 a { color: blue; }
das a-Elemente innerhalb des h1 -Elementes wird blau angezeigt. h1-Elemente sonst werden in rot angezeigt.

Klassenselektoren

Mit dem Attribut class wird einem Element einen bestimmten Style zugewiesen. Man kann allgemeine Klassen oder elementspezifische Klassen erstellen. In der CSS-Syntax wird ein Punkt vor den Namen der Klasse gesetzt.

.blau { color:blue; } kann jedem Elementen zugewiesen werden
<p class="blau"> dieser Text wird blau </p>
h2.rot { color:red; } ist nur für das Element h2
<h2 class="rot"> rote Überschrift </h2>

ID-Selektoren

Mit dem Attribut id wird einem Element einen Bezeichner zugewiesen. ID's werden nur einmal vergeben. Sie sind universell.
ID-Selektoren wird das Rauten-Zeichen #vorangestellt.

<div id="logo"> LOGO IMAGE </div> #logo { background-color: green; }
zeigt das Element mit dem id -Wert logo, mit grünem Hintergrund an.

Pseudoelement-Selektoren

Das a-Element kann durch in CSS definierte Pseudoklassen unterschiedlich angezeigt werden. Wichtig ist die richtige Reihenfolge

a:link = normaler Hyperlink
a:visited = besuchter Hyperlink
a:hover = Mauszeiger befindet sich gerade über dem Hyperlink
a:active = beim Klick auf den Hyperlink

Achtung: Pseudoelement-Selektoren werden von Browsern ab Version 5 unterstützt. Aeltere Browser (Versionen NS4.x oder IE4 und älter) unterstützen diese Pseudoelement-Selektoren nicht. Dies spielt aber insofern keine Rolle, da diese Browser keine Fehler anzeigen, sondern sie einfach ignorieren.