Selektoren
Element-Selektor
Der Element-Selektor, oder auch Typ-Selektor genannt, ist die einfachste Form der Zuweisung einer CSS-Regel an die Elemente in einer HTML-Datei. Es wird die Bezeichnung eines HTML-Elementes als Selektor genommen.
Beispiel: Die Regel h1 {…} gilt für alle <h1>-Tags in der HTML-Datei.
Klassen-Selektor
Klassen werden verwendet, wenn Tags vom selben HTML-Element unterschiedlich formatiert werden sollen (z.B. es gibt einige Absätze <p>, die anderes aussehen sollen, als die restlichen)
Klassennamen sind nicht vorgegeben (wie etwas die Namen der HTML-Elemente), sondern können frei gewählt werden. Man sollte jedoch die selben Regeln für Namen von Ankern und HTML-Dateien beachten.
Weiter Tipps zur Wahl eines Klassennamens:
- Klassennamen
sollen selbsterklärend sein. Wenn man den Namen (auch nach langer Zeit) liest,
sollte man sofort wissen, was damit gemeint ist. Er soll beschreiben, was
die Klasse darstellt und nicht, wie sie aussieht (denn das kann sich ändern).
Beispiel: Wenn wichtige Textstellen hervorgehoben werden sollen, kann eine Klasse dafür "wichtig" heißen. Weniger geeignet ist z.B. "rot", auch wenn die Schriftfarbe rot verwendet wirdl. Was wäre, wenn man sich später entschließt, nicht durch die Farbe, sonderen durch eine andere Schriftart die wichtigen Textstellen hervorzuheben? Oder: Wenn eine anderePerson oder man selbst nach längerer Zeit den Klassenamen "rot" sieht, weiß man dann auf Anhieb, was dies bedeuten soll? Es könnte ja auch sein, dass mit dieser Klasse Textstellen formatiert werden, deren Inhalt nicht mehr gültig ist oder nicht verwendet werden sollen: rot ist gleich Stopp.
Nichtssagende Namen wie "klasse", "schrift", "groesse", "rechts" oder "Stil1" sollen vermieden werden. Man verliert sonst sehr bald den Überblick.
Anmerkung: Wenn bei den Selektoren trotzdem welche mit den Namen "Stil1", "Stil2" oder "auto-style1", "auto-style2" usw. auftauchen, dann sind die vom Webeditor eingefügt und man hat folgendes falsch gemacht:Es gibt einige "gute" Schaltflächen, die man verwenden soll, denn sie strukturieren den Text. Sie fügen Tags ein wie <h1>, <p>, <em>, <li> usw. Andere Schaltflächen formatieren nur, und zwar eine bestimmte Textstelle: den markierten Text oder das Blockelement (z.B. Absatz), in dem sich die Einfügemarke gerade befindet. Da aber nur dieser eine Absatz formatiert wird, und nicht alle Absätze, muss der Webeditor zur Unterscheidung eine Klasse verwenden. Da man keine Klasse angegeben hat, ist der Webeditor gezwungen, selbst eine neue anlegen und einen Klassennamen zu erfinden. Computer sind nicht sehr kreativ: Webeditoren verwendet dann Namen wie "Stil1", "auto-style1" usw.
Besser: eine Klasse "wichtig" anlegen und diese fünf mal zuordnen. Es gibt dann nur eine, zentrale Regel.- "gute" Felder im Fenster Eigenschaften: Format, Stil. B, I, ungeordnete Liste, geordnete Liste, Text-Negativeinzug (nur innerhalb von Listen), Texteinzug (nur innerhalb von Listen), Hyperlink und eventuell Ziel
- "schlechte" Felder im Fenster Eigenschaften, die man nicht verwenden soll: Schriftart, Größe, Textfarbe, Linksbündig, Zentrieren, Rechtbündig, Blocksatz, Text-Negativeinzug (in Absätzen oder Überschriften), Texteinzug (in Absätzen oder Überschriften)
- Klassennamen sollten nicht nach ihrer
Formatierung gewählt werden sondern nach ihrer Funktion/Aufgabe.
Also wenn du die Angabe der Autoren in Grossbuchstaben dargestellt sollst,
dann ist "autor" die bessere Wahl als "grossbuchstaben".
- Wenn du nach einiger Zeit wieder einen Text schreibst und und eine Autorenangabe hast, dann kannst du dir sicher leichter merken: Autoren bekommen die Klasse "autor" als Autoren bekommen die Klasse "grossbuchstaben".
- Wenn du weitere Textteile hast wie Verlag und Übersetzer, und du diese
auch in Grossbuchstaben haben möchtest, was machst du dann?
- schlechte Variante:
- Du ordnest jedem dieser Absätze die Klasse "grossbuchstaben" zu. Falls du oder dein Auftraggeber später auf die Idee kommt, einen anders zu formatieren, dann stehst du an, denn alle haben die selbe Klasse. Du musst dann eine neue Klasse erstellen und dann alle HTML-Dateien durchgehen und die Textstellen suchen und die neue Klasse einzeln zuweisen.
- gute Variante:
- Jeder Absatz bekommt die entsprechende Klasse zugewiesen ("autor", "verlag", "uebersetzer"). Wenn jetzt einen davon anders formatieren musst, dann brauchst du nur einmal die entsprechende CSS-Regel umformulieren - das war es.)
Klassen in CSS-Regeln (z.B. p.wichtig)
Sollen nur tags einer bestimmten Klasse angesprochen werden, so
wird als Selektor der Name des tags und darauffolgend der Name
der Klasse verwendet, wobei beide durch einen Punkt getrennt
werden. Es dürfen
dabei keine Leerzeichen (Abstände) verwendet werden, es muss wie ein
einziges Wort geschrieben sein. Der Selektor für Absätze <p> einer
Klasse mit dem Namen "wichtig" wird p.wichtig geschrieben.
Das Trennzeichen für Klassen ist der . (Punkt)
Unterschied bei Klassenselektoren mit und ohne Tag (z.B. p.anmerkung und .anmerkung)
universeller Selektor / Universal-Selektor: * (Stern, in der Druckfachsprache
auch Asteriskus genannt)
spricht alle tags an, egal welche (wird verwendet wie Platzhalter,
Joker, wildcard in Suchmaschienen etc.)
- *.wichtig spricht alle tags an, die der Klasse wichtig zugeordnet wurden. Das können sein Absätze p.wichtig, Überschriften h2.wichtig, Listeneinträge li.wichtig, stark betonte Textstellen strong.wichtig usw.
- .wichtig wirkt genauso. Das Weglassen eines Tag-Namens wirkt genauso wie der Universal-Selektor. Es ist üblich geworden, den Selektor so zu schreiben (.wichtig anstelle von *.wichtig)
- Der universelle Selektor wird verwendet, wenn Klassen unterschiedlichen HTML-Elementen zugeordnet werden sollen und nicht nur einem einzigen.
Unterschied bei Klassenselektoren mit und ohne Tag (z.B. p.anmerkung
und .anmerkung)
In den meisten Fällen in der Praxis wird bei Klassen der Universalselektor
verwendet und zwar in der Form, dass er in der Schreibung weggelassen
wird: also .klassenname
Im (X)HTML-Code wird die Zuordnung einer Klasse zu einem
(X)HTML-Element mit Hilfe des Attributes class gemacht. Der Name
der Klasse wird dem Attribut als Wert zugeordnet, also zum Beispiel:
<p class="wichtig">…</p>.
Anmerkung: Der Wert enthält nur den Namen der Klasse, aber keinen
Punkt. Dieser wird nur in CSS-Selektoren als Trennzeichen zwischen
Tag-Namen und Klassennamen verwendet.
ID-Selektor
IDs werden wie Klassen verwendet. Die Unterschiede sind:
- IDs dürfen in einer HTML-Datei nur ein einziges Mal vorkommen,
sie identifizieren den tag.
Klassen dürfen öfters vorkommen, sie ordnen die tags bestimmten Klassen zu. - # ist das Trennzeichen in Selektoren in CSS-Regeln.
- IDs in Selektoren einer CSS-Regel geben dieser mehr Spezifität
als Klassen. Diese Regel setzt sich daher eher durch.
- Erläuterung:
Wenn gesagt wird: „Heute sind fast alle Kinder brünett, aber in der 3A sind alle blond, nur der Fritzi ist rothaarig.”, dann ist klar, dass Fritzi rothaarig ist, da die letzte Aussage die spezifischte - für ihn am zutreffendste - war und damit alle anderen Aussagen aufhebt. - Beispiel:
HTML:
<p class="abc" id="xy">
CSS:
p {color: red;}
.abc {color: green;}
#xy {color: blue;}
Ergebnis: Die erste Regel hat als Selektor nur einen tag (p), sie ist die unspezifischste (schwächste, unpassendste). Stärker, weil spezifischer ist die zweite Regel mit einer Klasse (.abc) als Selektor. Aber es setzt sich die dritte Regel durch, weil ihr Selektor mit einer ID (#xy) am spezifischsten ist. Näheres lernen wir später noch.
- Erläuterung:
IDs werden meist mit div-tags verwendet, um auf einer Seite bestimmte Bereiche zu definieren, z.B. Kopf, Navigation und Inhalt. Diese Bereiche können dann durch CSS-Regeln mit Kontextselektoren gezielt angesprochen und dadurch leichter formatiert und layoutiert werden.
Benutzen von IDs: Identifizieren eines einzigen tags
- Layout und Kontextselektoren: Zuordnen von ids auf divs um einen Bereiche wie Kopf, Navigation oder Inhalth einer Webseite. Danach gezieltes Anwenden von CSS-Regeln durch Kontextselektoren in der Form #name tag z.B. #kopf h1
- Auswahl eines bestimmten tags aus mehreren (z.B. die aktuelle Seite aus den aufgelisteten Seiten in der Navigation), das dann hervorgehoben formatiert werden kann. Dem tag wird z.B. die id #aktuell zugewiesen.
Kontextselektor
Bisher haben wir nur tags allgemein (z.B. h1) und mit Klassen (z.B. p.anmerkung) selektiert.
- Kontextselektoren nehmen auf die Dokumentstruktur, also der Verschachtelung
der einzelnen tags, Bezug. Sie geben an, dass die CSS-Regeln nur dann auf
ein tag angewendet werden, wenn es sich innerhalb der anderen angegebenen
befindet.
Beispiel: Selektor #kopf h1 (Anmerkung: Wir sind leider nicht mehr dazugekommen zu besprechen, was eine id ist. Es ist so etwas wie eine Klasse und wird mit einer # als Trennzeichen im CSS-Selektor angegeben.)- Die Regel wird auf die tags h1 angewendet, aber nicht auf alle, sondern nur wenn sie
- sich innerhalb eines tags mit der id namens kopf befinden. Welcher tag das ist, ist egal, da der universelle Selektor * verwendet wurde (*#kopf), dieser aber erlaubter Weise weggelassen wurde (#kopf). In den meisten Fällen wird der verwendete tag jedoch ein div sein.
- Die CSS-Regel wird immer auf den letzten (Einzel)tag des Kontextselektors angewendet. Die tags davor geben den Kontext an: In welchen anderen muss sich der letzte befinden.
- Es muss im Kontextselektor nicht die ganze Dokumentstruktur angegeben
sein. Es reicht, wenn alle im Kontextselektor angegebenen tags in der
Dokumentstruktur existieren und die Reihenfolge übereinstimmt. Es
müssen aber nicht alle in der Dokumentstruktur vorhandenen tags
im Kontextselektor angegeben sein.
Beispiel: ein Kontextselektor #inhalt li strong gilt für alle strong-tags, die in Listen stehen (egal ob ul oder ol), die sich in einem tag mit der id namens inhalt befinden. Die dazugehörige Struktur der HTML-Datei könnte dabei so aussehen: <body> <div#inhalt> <ol> <li> <strong> - Die Reihenfolge muss stimmen.
Ein Kontextselektor #inhalt li em a strong wird nicht angewendet, wenn die dazugehörige Struktur der HTML-Datei z.B. so aussieht: <body> <div#inhalt> <ol> <li> <a> <em> <strong> - Kontextselektoren ermöglichen schnelleres Arbeiten beim Erstellen von HTML-Dateien. Die tags müssen nicht einzeln gewünschten Klassen zugeordnet werden, sondern bekommen die Formatierung "automatisch" zugewiesen. Da aber die Zuordnung fix vorgegeben ist, können die vom Kontextselektor erfassten tags, nicht mit Kontextselektoren unterschiedlich formatiert werden. Wenn also einzelne tags "willkürlich", also nicht durch die Struktur abgeleitet, sondern nur durch den Wunsch des Autors/Autorin bestimmt, speziell formatiert werden sollen, dann geht dies nur mit Klassen.
Gruppierung
Gruppieren = Auflisten von Selektoren, die einzelnen Selektoren werden durch Beistriche getrennt. Beispiel:
- gleiche Deklarationen für mehrere Selektoren
z.B. h1, h2 {font-family: Verdana, .... , sans-serif;} - Wird verwendet, wenn bei HTML-Tags manche Formatierungen ident sind,
andere aber unterschiedlich (z.B. h1 und h2 haben die selbe Schriftfamilie
aber unterschiedliche Textausrichtungen). Es werden dann drei
Regeln erstellt:
h1, h2 {...}: mit den Deklarationen, die ident sind
h1 {...}: mit den Deklarationen, die nur für h1 gelten sollen
h2 {...}: mit den Deklarationen, die nur für h2 gelten sollen - empfohlene Vorgangsweise:
- Regel (für einen Selektor) wie gewohnt erstellen, Selektor im Quellcode ergänzen.
- gleich für mehrere Selektoren erstellen, dann beim Selektor-Typ "Erweitert" auswählen
Achtung: Die selbe Deklaration soll nicht mehrfach in unterschiedlichen Regeln vorhanden sein.
Übersicht: Selektoren: Vor- und Nachteile
Welche Arten von Selektoren gibt es, was sind die Vor- und Nachteile:
- (X)HTML-Element (Bezeichnung im Dreamweaver: Tag), z.B. h1
Vorteil: Verursacht in der HTML-Datei keinen Arbeitsaufwand, denn die Zuordnung macht der Browser automatisch.
Nachteil: Die durch den Selektor bestimmten(X)HTML-Elemente, werden alle gleich formatiert - es kann nicht differenziert werden. - Klasse (Bezeichnung im Dreamweaver: Klasse), z.B. .wichtig
Vorteil: Flexibel, gleiche (X)HTML-Elemente können verschieden formatiert werden (durch unterschiedliches Zuordnen von Klassen).
Nachteil: Arbeitsaufwand, jedem entsprechenden (X)HTML-Element muss die Klasse (Bezeichnung im Dreamweaver: Stil) zugewiesen werden. - Kontextselektor (Bezeichnung im Dreamweaver: Erweitert), z.B. #kopf h1
Vorteil: vereint die Vorteile von (X)HTML-Elemente und Klassen, das heißt kein Arbeitsaufwand und Flexibelität: Gleiche (X)HTML-Elemente können verschieden formatiert werden ohne dass ein weiterer Arbeitsschritt (wie Klassen zugeordnen) gemacht werden muss.
Nachteil: Funktioniert nur, wenn die Differenzierung durch die Position innerhalb der Struktur, also den Aufbau der (X)HTML-Datei (= Kontext) ableitbar ist.
Praxis - was soll man wie verwenden?
- Vorzugsweise werden Kontextselektoren verwendet. Sie machen die wenigste Arbeit. Damit dies funktioniert, muss die Website gut konzipert worden sein, damit der Aufbau der Dokumentstruktur (divs mit ids) gelungen ist.
- Klassen werden dort verwendet, wo die Auswahl eines (X)HTML-Elementes
nicht durch die Position innerhalb der Struktur ableitbar ist, sondern
die Auswahl nur durch den Sinn des Inhaltes ableitbar ist - also "aus
der Sicht" des Kontextes willkürlich passiert.
- Beispiel: Dass ein Absatz wichtige Information enthält, ergibt sich nur aus seinem Inhalt. Aus der Position innerhalb der Struktur der (X)HTML-Datei ist dies nicht erkennbar. Daher ist die Auswahl "willkürlich" und die Formatierung muss mit einer Klasse erfolgen.
- Tag-Selektoren (Elementselektoren) werden kaum verwendet, da selten alle gleichen (X)HTML-Elemente/Tags einer (X)HTML-Datei gleich aussehen sollen. Meist sollen sie unterschiedlich aussehen, je nachdem wo sie stehen - ihre Position ist. Daher werden dazu Kontextselektoren verwendet.