Ein ganz spezielles Kapitel, das man erst nach und nach braucht: Selektoren. Selektion hat in unserer Sprache keinen guten Klang, deshalb nennen wir es doch "Auswähler": Welchen Tags sollen spezielle Formate verpaßt werden? Es geht um die Adressierung spezieller Tags in den Style-sheets. Um diese Möglicjkeit ausreizen zu können, muß man die Dolumentenhierarchie kennen. Gute Browser und Webeditoren zeigen die mit ihren "DOM-Inspektoren" gerne an.
Eine notwendige Anmerkung: Die hier gezeigten Möglichkeiten sind auch noch kombinier- bzw. schachtelbar. Auf Beispiele dazu, wie sie die CSS2-Spezifikation bietet, verzichte ich (nur zu gern). Denn, genau besehen, unterlaufen diese komplexen Möglichkeiten die Hauptabsicht von CSS, nämlich Vereinfachung der Formatierung, Schaffung übersichtlicherer und besser wartbarer Seitenstrukturen etc.
| Muster | Erklärung | Beispiel |
|---|---|---|
| * | jedes Element, wenn noch etwas folgt wie "*.red" (Klassendefinition) kann * entfallen | Die Styleangabe: *{color:#000} produziert eine weiße Seite, wenn sie nicht nachträglich für spezielle Elemente überschrieben wird. |
| E | das Seitenelement (tag) namens "E", Aufzählung mehrerer mit Komma | div{margin:25px;} betrifft div, was sonst? div,p {padding:10px;} meint sowohl div als auch p |
| E F | das Seitenelement (tag) namens "F" welches Nachkomme von "E" ist. Es muß kein direkter Nachkomme sein. | Hier ist im Kopf erklärt: h2 { color:red } h2 em { color:blue } und es folgt eine h2 mit em-phasized-tem (ist es nicht schön ausgedrückt?) Einschub: Ein Test für betonte Teile innerhalb der Überschrift |
| E> F E * F | das Seitenelement (tag) namens "F" welches direkter Nachkomme, also Kind von "E" ist. Mit dem * wird der Enkel adressiert, wobei die Zwischengeneration beliebig ist! | body> p { color:blue }, wie hier im Seitenkopf erklärt, macht alle Paragraphentexte blau, die direkt auf dem body liegen, diejenigen innerhalb anderer Tags wie div oder td nicht! Dieser Text hier ist -ausnahmsweise- als Paragraph (<p>) ausgezeichnet und nicht blau. |
| E:first-child :first-child | das Erstgeborene von E bzw. eine Pseudoklasse "erstgeboren" | Wer Kind ist, und wo gleichberechtigte Kinder vorkommen, denen man den Erstgeborenen vorziehen kann, muß ggf. erst mühsam ermittelt werden. |
| a:link a:visited | unbesuchter bzw. besuchter Link; Link- Pseudoklassen | Entsprechende Links sind im Menüfenster zu sehen. Die Klasse "visited" ist fast allwissend. Zum Probieren: Diese Seite neu laden. Der Link erscheint immer "gebraucht". |
| E:active E:hover E:focus | Dynamische Pseudoklassen, hier läßt sich für (fast) beliebige Tags auf Bedienhandlungen des Users reagieren, ohne Javascript verwenden zu müssen | Im Dokumentenkopf ist p:hover { color:yellow } erklärt, allerdings gibt es außer hier nur wenige <p>-Tags auf der Seite. Bitte suchen! |
| E:lang(c) | das Seitenelement (tag) namens "E" | div { margin:25px; } betrifft div, was sonst? |
| E + F | E und F haben gemeinsame Eltern und sind direkt benachbart | h1 + h2 { margin-top: -5mm } löst das Problem zu großer Abstände der direkt aufeinanderfolgenden Überschriften. Die gewöhnlichen Rundum-Abstände (margins) der eigenständigen Überschriften bleiben unverändert |
| E[attr] E[attr=wert] E[attr~=wert] E[attr|=wert] | sog. Attributselektor, es wird dasjenige Element E adressiert, indem das angegebene Attribut gesetzt ist (1), einen speziellen Wert hat (2), 'wert' unter mehreren angegebenen Attributwerten vorkommt (3) oder 'wert' einem durch Bindestrich abgeteilten Bestandteil der Wertangabe im Attribut gleicht (4) | h2[class]{ irgendwas } adressiert diejenigen h2's, in denen eine Klasse angegeben ist (zu 1), |
| E.wort | Klassenselektor. In HTML, XHTML der häufigste Fall. | Aufruf mit <div class="wort">... |
| E#meineID | ID-Selektor: Auswahl des Elements mit der genannten ID | Wenn es in der Seite ein Bild gibt <img id="123" href=...>, dann wäre ihm mit img#123 {border: ...} im Style sheet eine spezielle Umrandung zuzuweisen |