Wozu sind Selektoren da?
Selektoren innerhalb einer CSS-Datei sprechen HTML-Tags an und weisen diesen Attribute (Farbe, Hintergrundfarbe, Textformatierung uswusf.) zu und geben dazu die entsprechenden Werte an.
Klingt gut, aber wie sieht so ein Selektor aus?
Die Syntax (Schreibweise) einer CSS-Regel ist wie folgt:
Selektor { Attribut: Wert; }
wobei man jedem Selektor auch mehrere Attribute zuweisen kann. Will man dies denn nun tun, so trennt man die einzelnen Attribute immer mit einem Semikolon voneinander ab.
Bsp.: Selektor { Attribut, Wert; Attribut: Wert; Attribut: Wert; … }
Welche Selektoren gibts denn so?
Der Universalselektor
Wie man ihn auch aus den SQL-Befehlen kennt, das *. Mit dem Sternchen (Asterisk) spricht mal alle Elemente einer HTML-Datei an, das heißt, dass allen Elementen die Attribute zugewiesen werden, die man in so einer CSS-Regel notiert.
Bsp.: * { color: #fff; background-color: #000; }
Mit dieser CSS-Regel wird allen Elementen weiße Schriftfarbe und schwarze Hintergrundfarbe zugewiesen. Sinn macht das sicherlich keinen, es dient lediglich dem Zweck.
Der Tag-Selektor
Will ich nun genauer vorgehen und nur bestimmte Elemente meiner HTML-Datei ansprechen, so kann ich dies indem ich zum Beispiel nur einer bestimmten Sorte von Tags Attribute zuweise. Das ist einfacher als einem Kind nen Lolli zu klauen, glaubt es mir:
Bsp.: h1 { color: #f00; font-size: 36px; font-weight: bold; }
So, damit haben wir jeder Überschrift höchster Ordnung (jedem Tag h1) die Werte "rote Farbe", "Schriftgröße 36 Pixel" und "Schriftschnitt fett" zugewiesen.
Der Klassen-Selektor
Jetzt wird es langsam spannender. Wir wollen jetzt eine Klasse definieren. Klassenselektoren kann man beliebig vielen Tags auf einer HTML-Seite zuweisen. Nehmen wir an, wir haben Überschriften zweiter Ordnung (h2) einmal in der linken Spalte einer Webseite auf weißem Hintergrund und einmal in der rechten Spalte auf schwarzem Hintergrund. Dumme Geschichte, denn wir haben ja vorher notiert:
h2 { color: #000; }
wodurch alle Überschriften der zweiten Ordnung nun schwarz sind und somit rechts nicht mehr lesbar.
Das Problem lösen wir einfach indem wir allen h2-Tags auf der rechten Seite folgenden Zusatz geben:
<h2 class="name">Überschrift</h2>
Jetzt können wir diese Überschriften gesondert ansprechen mit einem Klassenselektor:
.name { color: #fff; }
Die Notierung ist also ein Punkt und der Name, den man dem Tag als Wert zuweist. Der Name ist hierbei frei wählbar. Ob man also sinnvoll ausschreibt "rechts" bei unserem Beispiel oder "name" wie ich oder sowas schönes wie "mistmistmist" bleibt euch überlassen. Wichtig ist folgende Schreibweise:
.klassenname { Attribut: Wert; }
Der ID-Selektor
Wie der Klassenselektor kann man auch mit dem ID-Selektor einzelne Tags verändern, auch wenn man diese vorher schon mit einem Tag-Selektor verändert hat. Man sollte nur in das Tag des Elements das Attribut id notieren und sich wieder einen lustigen Namen einfallen lassen.
<h2 id="name">Noch eine Überschrift</h2>
Unterschiede zum Klassenselektor gibt es allerdings nicht nur in der Schreibweise! Oh ja, denn eine ID vergibt man nur ein einziges Mal in einer HTML-Datei. Wie auch in Datenbanken werden IDs nur einmal vergeben und damit hat sichs.
Merke: Klassen so oft man lustig ist, IDs nur ein einziges Mal vergeben.
Wie notiert man ID Selektoren nun in einer CSS-Datei? Ganz einfach:
#idname { Attribut: Wert; }
Also eine Raute mit dem ID-Namen, geschwungene Klammer und so weiter und so fort wie bisher.
Hier sind wir dann am Ende mit dem oberflächlichen Selektorengedönse angelangt. Ich werde auf Wunsch gerne noch erklären was Attributselektoren sind, wie man Kindselektoren notiert, welche Sonderzeichen es noch gibt neben Raute und Punkt und was diese dann so bewirken und was Pseudoselektoren sind (Letztere sind übrigens m.E. nicht zu verachten und sicherlich Prüfungsrelevant, bzw. kann ich mir nicht vorstellen, dass man die weglässt. Aber das weiß ja nur die zfa -__- ).
Fehler bitte melden/korrigieren und Fehlendes ergänzen. =)