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- bzw Typ-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:
a:link,
a:visited,
a:hover,
a:focus,
a:active { Attribut: Wert; }
Es gibt noch weitere Pseudoselektoren, aber die werden die ZFA im allgemeinen Teil sicherlich nicht interessieren, vor allem da man diese erst "kürzlich" eingeführt hat in die Sprache CSS.
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.
Kindselektoren (Sonderzeichen die Erste: ">")
Gerade haben wir etwas über die kombinierten Selektoren gelernt, nun kommen wir zu den Kindselektoren. Wie der Name bereits sagt, geht es darum Kinder von Elementen anzusprechen mit einer CSS-Regel um genau diese Kinder zu stylen.
Warum? Weil es ja sein kann, dass man für die komplette Seite festgelegt hat, dass alle Links rot und fett sein sollen, da man rot + fett = super findet. Jetzt haben wir aber auch eine super Navigationsleiste, welche rot hinterlegt ist und somit sieht man unsere Superlinks darauf nicht.
Was tun? Wir sprechen die Links in der Navigation gesondert an, indem wir einen Kindselektor schreiben.
Bsp.: Vorausgesetzt wir haben einen Container (div) mit einer ID "nav" und haben darin die Navigation untergebracht in Form einer unsortierten Liste "ul", welche die Listenpunkte "li" enthält, welche wiederum die Links "a" enthalten, dann können wir diese Kindeskindeskindeskinder mit einer CSS-Regel direkt ansprechen:
#nav ul li > a:link { color: #000; }
Jetzt sind alle Links im Container "nav" mit der "ul" und den "li"s darin schwarz.
Ein einfacher Kindselektor wäre zum Beispiel:
body > p { Attribut: Wert; }
In diesem Fall stylen wir nicht den Body sondern alle Paragraphen, die Kindelemente des body-Tags sind. Andere Paragraphen auf der Seite, welche Kinder anderer Elemente sind, sind davon nicht betroffen! Klar soweit?
Elternselektor
Wäre sinnvoll, ne. Gibts aber nicht. Es gibt keine CSS-Regel mit einem "kleiner als" Klämmerchen und deswegen gibts da auch nix zu wissen. Weitergehen, es gibt hier nichts zu sehen!
Nachbarselektor (Sonderzeichen die Zweite: "+")
Ach, aber den gibts? Ja, den gibt es. Folgendes Beispiel macht das relativ eindeutig.
Bsp.:
<h2>Überschrift</h2>
<p>Erster Paragraph</p>
<p>Zweiter Paragraph</p>
Welch Dilemma, wir wollen nur den ersten Paragraphen verändern und den zweiten unberührt lassen. Wir machen wir das nun? Indem wir einen Nachbarselektor notieren:
h2 + p { Attribut: Wert; }
Damit sagen wir, dass nur Paragraphen, welche auf der gleichen Ebene wie das vorhergehende Element liegen angesprochen werden und diesem unmittelbar folgen.
Indirekter Nachbarselektor (Sonderzeichen zum Dritten: "~")
Einen hab ich noch! Und der inrekte Nachbarselektor funktioniert ähnlich dem Vorhergehenden.
Der Unterschied ist, dass nicht nur der erste Nachbar eines Elements angesprochen wird, sondern alle nachfolgenden Elemente gleichen Typs, welche Nachbarn auf gleicher Ebene zu dem Element sind.
Bsp.: Da nehmen wir das Beispiel von oben mit der Überschrift und den beiden Paragraphen nochmal. Nur das wir diesmal ein anderes Sonderzeichen in die CSS-Regel reinschreiben.
h2 ~ p { Attribut: Wert; }
Damit sind nun alle Paragraphen, welche dem h2-Element folgen angesprochen.
Attributselektoren (noch mehr Sonderzeichen: "[" und "]" und "=" und ")
Ja Himmel, hörts denn nicht bald auf? Nein, denn man kann Elemente eines HTML-Dokuments auch nach ihren Attributen ansprechen und umgestalten.
Wozu brauch ich das, wo ich doch IDs und Klassen und all die anderen Optionen habe? Dazu ziehen wir ein Beispiel zur Hand:
Wir haben eine Seite mit einem Formular für unsere Benutzer, mit dem sie uns mit ihren Adressdaten versorgen können, damit wir sie daheim besuchen und persönlich kennenlernen können. Wozu sonst benötigt man wohl Benutzerdaten? In diesem Formular haben wir Texteingabefelder für Vorname, Nachname und all die anderen Adressdaten, außerdem haben wir Checkboxen, wo sich unser Benutzer entscheiden kann, ob er vom Admin persönlich oder dem Designer der Seite besucht werden möchte. Schlussendlich dann natürlich noch den Absende-Button.
Jetzt findet der Designer die Standardoptik der Formularfelder und des Buttons endlangweilig. Ergo will er sie umgestalten. Das tut er über Attributselektoren. Jedes input-Feld hat sein persönliches Attribut. Zum Beispiel haben Absendebuttons immer das Attribut type="submit" und Texteingabefelder immer das Attribut type="text".
Man könnte natürlich hingehen und alle Inputfelder mit einem Typselektor ansprechen:
input { Attribut: Wert; }
aber viel mehr Sinn macht es doch, wenn wir die Textfelder vom Absendebutton trennen:
input[type="text"] { Attribut: Wert; }
input[type="submit"] { Attribut: Wert; }
Natürlich kann man jedwedes Element eines HTML-Dokuments auf diese Weise ansprechen. Zum Beispiel über das title-Attribut oder das alt-Attribut oder was einem sonst so einfällt. Ein letztes Beispiel, welches aber nur ganz eventuell vielleicht Sinn machen könnte:
Wir haben Bilder auf der Seite, denn Bilder sind hübsch. Einige haben eine Weite von 300 Pixeln (300px) andere dagegen sind breiter (600px). Jetzt wollen wir aber nur den schmaleren Bildern eine Eigenschaft zuweisen und nicht allen Bildern. Ergo folgende CSS-Regel mit einem Attributselektor:
img[width="300px"] { Attribut: Wert; }
Natürlich sind dies Beispiele, die ich nun zur Hand genommen habe, weil sie Sinn machen, es gibt auch einen simplen, standard, normalo Attributselektor, womit man Elemente anspricht, die ein bestimmtes Attribut beinhalten unabhängig vom Wert desselben:
img[width] { Attribut: Wert; }
Somit sind alle Bilder einer Seite, welche das Attribut width im Element notiert haben, angesprochen. Wichtig sind hierbei die eckigen Klammern, welche das Attribut beinhalten.
Fehler bitte melden/korrigieren und Fehlendes ergänzen. =)
