Wenn wir HTML-Elementen eine gestalterische Formatierung zuordnen wollen, dann müssen wir sie unseren Anweisungen irgendwie "ansprechen". Dazu dienen in CSS die sogenannten Selektoren. Mit einem Selektor geben wir an, auf welche Elemente sich die CSS-Anweisungen, die dem Selektor folgen, beziehen. In diesem Kurs werden wir hauptsächlich drei Arten von Selektoren benutzen, welche die größte praktische Relevanz haben, nämlich die type-, class- und id-Selektoren. Ein kurzer Unterabschnitt gibt dann auch noch einen Überblick über ein paar weitere Selektoren, die wir hier ebenfalls gelegentlich verwenden werden. Am Schluss gehen wir auch noch darauf ein, wie Selektoren kombiniert werden können.
type-Selektor
Der type-Selektor wählt alle HTML-Elemente mit demselben Tagnamen aus (sieh dir dazu den Abschnitt über Tags im HTML-Kurs an). Dazu wird in das CSS-Dokument einfach dieser Tagname geschrieben (also ohne spitze Klammern). Möchte ich also alle Überschriften der Ordnung 1 (HTML-Tag: <h1>) auswählen, so heißt der passende Selektor dafür einfach h1.
Übrigens: Da CSS nicht nur für HTML ausgelegt ist, sondern auch für andere Sprachen mit einem ähnlichen Aufbau, muss es der Tagname in HTML nicht existieren. Die Vorgehensweise funktioniert genauso mit irgendwelchen Phantasietagnamen. Wenn ich irgendwo in meinem HTML-Dokument Elemente wie
<einsehrgutertag>Ich kenne keine Regeln!</einsehrgutertag>eingetragen habe, dann kann ich nun in meinem CSS-Dokument mit einsehrgutertag Bezug auf sie nehmen. Aus Gründen, die HTML betreffen, sollte man soetwas in einem HTML-Dokument lassen. Aber aus rein gestalterischer Sicht funktioniert das völlig problemlos.
class-Selektor
Möchte man Elemente über den class-Selektor auswählen, so muss man ihnen durch das class-Attribut in HTML einen Klassennamen zuweisen. Das geht so:
<h2 class="sommer">August</h2>In dem CSS-Dokument benutzt man den Klassennamen mit einem Punkt davor, um die Elemente mit diesem Klassennamen anzusprechen. Eine Regel für .sommer bezieht sich nun also auf alle Elemente, welche das class-Attribut sommer erhalten haben. Das müssen nun nicht nur <h1>-Elemente sein. Ich kann dieselbe Klasse auch beliebigen anderen Elementen geben.
Zu beachten ist, dass für Klassennamen nur die Buchstaben a-z, A-Z, die Ziffern 0-9, den Bindestrich - und den Unterstrich _ verwendet werden dürfen. Beginnen muss ein Klassenname immer mit einem Buchstaben.
id-Selektor
In vielen Situationen ist es wichtig, ein ganz bestimmtes Element auf eine gewisse Art zu formatieren. Dazu kann dem Element im HTML-Dokument das id-Attribut zugewiesen werden. Dieses muss im ganzen Dokument eindeutig sein. Es darf also keine zwei Elemente mit demselben id-Attribut geben.
<ul id="obstsalat-zutaten">...</ul>Mit dem angegebenen Code-Beispiel im HTML-Dokument, können wir nun in CSS durch #obstsalat-zutaten, also indem wir der ID ein # voranstellen, dieses ganz bestimmte <ul>-Element formatieren. Weitere <ul>-Elemente und auch sonst alle anderen Elemente des HTML-Dokuments bleiben von diesen Anweisungen dann völlig unberührt.
Die Namenswahl bei id-Attributen ist freier als im Fall der Klassennamen. Von HTML aus sind hier alle Zeichen außer jede Art von Leerzeichen erlaubt. Da wir die id aber in unserem CSS-Dokument verwenden wollen, sollten wir uns an dieselben Namensregeln halten wie bei Klassen, um unnötige Probleme zu vermeiden.
Weitere Selektoren
Es gibt einen Universalselektor, mit dem man auf alle Elemente gleichzeitig zugreifen kann. Er wird im CSS-Dokument mit einem * angegeben. Dieser Selektor sollte nur verwendet werden, wenn man wirklich eine Formatierung für alle Elemente anwenden möchte, ohne dass es dafür eine andere Möglichkeit gibt. Wir werden uns später noch die Vererbung von CSS-Eigenschaften ansehen, welche in den meisten Fällen sinnvoller genutzt werden kann als der *-Selektor.
Desweiteren gibt es auch noch sogenannte Pseudoklassen in CSS. Diese werden mit einem vorangestellten : im CSS-Dokument angegeben. Eine häufig auftretende Pseudoklasse ist :hover. Diese wählt Elemente aus, über denen sich gerade der Mauszeier befindet. Für spezielle Anwendungen lohnt es sich, sich einen Überblick über die möglichen Pseudoklassen zu verschaffen. In diesem Kurs werden sie jetzt aber keine große Rolle spielen.
Kombination von Selektoren
Wir können auch mehrere Selektoren kombinieren. Zum Beispiel wird mit dem Selektor p.sommer jedes <p>-Element mit dem Klassennamen sommer ausgewählt. Nicht betroffen von den Anweisungen, die diesem Selektor folgen, wären dann also beispielsweise alle <h1>-Elemente mit der Klasse sommer, weil nicht beide Bedingungen erfüllt sind.
Ein anderes Beispiel für die Kombination von zwei Selektoren ist p a, in dem wir zwei Selektoren einfach durch ein Leerzeichen trennen. Dies hat zur Folge, dass alle <a>-Elemente ausgewählt werden, die sich innerhalb eines <p>-Elements befinden. Es gibt noch viele weitere Möglichkeiten zur Kombination von Selektoren. Für diesen Kurs genügen uns aber die jetzt kennengelernten!