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 man 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 -__- ).
Pseudo-Selektoren
Wer da den Namen gewählt hat weiß ich nicht, aber er klingt sehr seltsam beim ersten Mal. Ein Pseudoselektor wird hinter einem Selektor angefügt und beschreibt bestimmte Zustände des Elements, welches man mit dem Selektor angesprochen hat.
Zum Beispiel haben Links vier verschiedene Zustände. Da wäre der "Normalzustand", wo der liebe Link einsam und allein auf der Website rumhängt und keiner mit ihm interagiert. Dies wäre der :link Zustand. Will man also diesem Zustand eines Links Eigenschaften zuweisen, macht man das so:
a:link { Attribut: Wert; }
Dann hätten wir noch die Links, welche schonmal besucht wurden. Sprich sie wurden bereits einmal vom Benutzer der Seite angeklickt und wechseln somit in den benutzten Zustand (klingt etwas schmutzig).
a:visited { Attribut: Wert; }
Der dritte Zustand ist der beliebte "Mouseover-Effekt" oder "Rollover-Effekt". Früher hat man sowas mit Javascript gelöst, heute geht das mit CSS viel einfacher:
a:hover { Attribut: Wert; }
Hierzu muss man sagen, dass es noch den zusätzlichen Zustand a:focus gibt, der für Barrierefreiheit und Menschen, die mit der Tastatur navigieren gedacht ist. Sprich, a:hover ist für Mausinteraktion und a:focus ist für Tastaturinteraktion (ganz grob formuliert).
a:focus { Attribut: Wert; }
Der vierte Zustand ist der aktive Zustand eines Links. Das wäre dann der Moment in dem der User ihn anklickt und direkt mit dem Link interagiert. Auch für diesen Zustand kann man Eigenschaften dem Link zuweisen, was über folgende CSS-Regel passiert:
a:active { Attribut: Wert; }
WICHTIG! Wenn man alle vier Zustände in einer CSS-Datei beschreibt, dann muss dies auch genau in der Reihenfolge passieren, die ich soeben verwendet habe. Warum das so ist? Wegen der Vererbung von Eigenschaften; Und glaubt mir, da wollt ihr nicht, dass ich zu detailiert werde, es ist einfach wichtig, dass die Reihenfolge eingehalten wird:
Kombinierte Selektoren
Wie ihr oben seht, habe ich die verschiedenen Selektoren durch Kommas getrennt und dann allen { Attribut: Wert; } zugewiesen und ja, das funktioniert auch. Zum Beispiel kann es ja sein, dass ich nicht will, dass all meine Überschriften fett geschrieben werden. Ich hab ne h1, ne h2 und ne h3 und alle drei sind se fett. Also notiere ich folgende CSS-Regeln:
h1 { font-weight: normal; }
h2 { font-weight: normal; }
h3 { font-weight: normal; }
Rischdisch? Ja, richtig, aber es geht viel einfacher mit einem "Kombiselektor":
h1, h2, h3 { font-weight: normal; }
Alle drei Überschriften sind nun nicht mehr fett, sondern normal ausgezeichnet und wir haben Platz, Zeit und Datenmenge bei der CSS-Datei gespart.
Fehler bitte melden/korrigieren und Fehlendes ergänzen. =)