CSS 2.1 · Selektor
Selektor Typ-Selektor
Vollreferenz zu Typ-Selektor aus CSS 1 und CSS 2.1 mit Syntax, Bedeutung, Beispiel und Browserunterstützung.
Typ-Selektorp { outline: 2px solid #7A2FB0; }
Überschrift
Erster Absatz direkt nach der Überschrift, mit einem Link und einem Zitat
.
Zweiter Absatz, Klasse extra.
- Erster Listenpunkt
- Zweiter Listenpunkt mit Link
- Dritter Listenpunkt
Dritter Absatz, ohne Klasse.
Syntax
Dem Element E werden die notierten Deklarationen zugeordnet.
e { Deklarationen }
Bedeutung
Die einfachsten in CSS definierbaren Selektoren sind die Typenselektoren. Durch sie werden jedem Autritt eines Elementes E bedingungslos die durch den Typselektor E definierten Deklarationen zugeordnet. Deshalb wurden sie in CSS 1 noch Elementselektoren genannt.
Jedes Webdokument besteht aus verschiedenen Elementen: dem Body (BODY), den Überschriften (H1...H6), den einzelnen Absätzen (P), usw. Für jedes dieser Elemente lassen sich Typselektoren definieren, mit denen die Eigenschaften der Elemente ganz allgemein und ohne Einschränkungen verändert werden können.
Die Typselektoren werden den Elementen dadurch zugeordnet, dass sie dieselbe Bezeichnung tragen: der Selektor body gilt für das Element BODY, der Selektor p gilt für das Element P, usw.
Wenn man mit XHTML und der DTD strict arbeitet, ist es wichtig, dass man auf die Groß-/Kleinschreibung achtet. Da XHTML in dieser Hinsicht einen Unterschied macht, paßt z. B. ein Selektor ABBR nicht mit einem Element abbr zusammen. Gleichzeitig läßt XHTML nur Kleinschreibung zu, daher können auch nur kleingeschriebene Typselektoren im Stylesheet verwendet werden.
Webautoren sind gehalten, den Typselektor nur zu benutzen, um das Erscheinungbild der HTML-Elemente an ihr Dokument anzupassen. Er hat nicht den Zweck, den Elementen ganz neue Charakteristika zu geben. Anders als in XML hat in HTML jedes Element seine fest vorgegebene Bedeutung.
Beispiele
Im folgenden Beispiel werden für alle P-Elemente eines Dokumentes die gleichen Randabstände definiert:
P { margin: 0.5em 0 0.5em 0; }
Browserunterstützung
- Der Typselektor wird von allen modernen Browsern erkannt.
Eric Meyer's CSS2 Test Suite zeigt am praktischen Beispiel, wie die Browser mit dieser Eigenschaft umgehen.
Keine Eigenschaft und kein Selektor stehen in einem Stylesheet für sich allein. In der Praxis kann das Zusammenspiel zwischen verschiedenen Elementen und Selektoren einen nicht zu unterschätzenden Einfluss auf die Fähigkeiten der Browser haben. Bugs treten oft erst durch das Zusammenwirken mehrerer Eigenschaften an unterschiedlichen Elementen auf.
Der leichteste Selektor
Ein Typselektor wiegt 0,0,0,1 und ist damit der leichteste benannte Selektor überhaupt. Jede Klasse und jede Kennung überstimmt ihn, und selbst eine Kette aus mehreren Typselektoren bleibt unter dem Gewicht einer einzigen Klasse.
Daraus ergibt sich seine Rolle in einem Stylesheet. Er beschreibt, wie ein Element aussieht, solange niemand etwas anderes sagt: der Grundriss der Typografie, die Abstände zwischen Absätzen, das Aussehen von Listen und Tabellen. Alles Besondere wird darüber geschrieben, und dafür genügt schon eine Klasse.
Diese Schichtung ist der Grund, warum sich ein Stylesheet mit vielen Typselektoren am Anfang und wenigen Klassen danach gut pflegen lässt. Wer umgekehrt beginnt und alles mit Klassen festlegt, braucht für jede Ausnahme etwas Schwereres.
Groß- und Kleinschreibung
Die Beispiele dieser Referenz schreiben Elementnamen groß, also BODY und H1. Das war
die Schreibweise der frühen Jahre und stammt aus einer Zeit, in der auch die Auszeichnung selbst so
notiert wurde.
Für Dokumente in HTML ist das gleichgültig: Elementnamen werden dort ohne Rücksicht auf die
Schreibweise verglichen, P und p sind derselbe Selektor. In Dokumenten anderer
Auszeichnungssprachen gilt das nicht; dort wird genau unterschieden, und ein Selektor mit falscher
Schreibweise trifft nichts.
Da Stylesheets für beide Arten von Dokumenten geschrieben werden können, hat sich die Kleinschreibung durchgesetzt. Sie ist in HTML richtig und in den anderen Fällen die übliche.
Elemente außerhalb von HTML
Ein Typselektor spricht einen Elementnamen an, und Elementnamen sind nicht auf HTML beschränkt. In einem Dokument, das mehrere Auszeichnungssprachen mischt, etwa Text und eingebettete Grafik, kann derselbe Name in zwei Bedeutungen vorkommen.
Für diesen Fall gibt es die Möglichkeit, Namensräume zu erklären und einen Selektor auf einen davon zu beschränken. Das gehört nicht mehr zu CSS 2.1, sondern kam mit einem eigenen Modul, ist aber die folgerichtige Fortsetzung dessen, was hier beschrieben ist: der Selektor nennt einen Namen, und wo Namen mehrdeutig werden können, braucht er eine Herkunft dazu.
Besonderheiten im Medientyp handheld
Dieser Selektor ist Teil des Standards CSS Mobile Profile 1.0 und unterliegt damit auch in Mobilgeräten allen relevanten Regeln aus CSS 2.1. Es sind keine Einschränkungen bei der Umsetzung des Typselektors durch die Mobilgeräte bekannt.
Verwendete Standards
Dieser CSS-Referenz liegen folgende Spezifikationen zugrunde: CSS 1, CSS 2.1 CR und CSS Mobile.