Elementtyp-Selektor
(Auszug aus "CSS − Anspruchsvolle Websites mit Cascading Stylesheets" von Rachel Andrew & Dan Shafer)
Am häufigsten kommen als Selektoren einzelne Elemente ohne besondere Spezifizierung oder Erweiterung zum Einsatz. Eine Stilregel mit einem solchen Elementtyp-Selektor gilt dann für jedes HTML-Element dieses Typs, sofern sie nicht von einer anderen Stilregel überschrieben wird.
Tabelle: CSS-Selektortypen.
| Selektortyp | Auswirkung | Beispiele in CSS-Syntax |
|---|---|---|
| Universeller Selektor (CSS2) | Stilregel ist gültig für alle Elemente im HTML-Dokument. | * (oder einfach keine Selektorangabe) |
| Elementtyp | Stilregel ist gültig für alle im Selektor genannten HTML-Elemente. | h1 p |
| Klassen-Selektor | Stilregel ist nur für HTML-Elemente gültig, deren class-Attribut der Klassenangabe im Selektor entspricht. | .articletitle h1.important |
| ID-Selektor | Stilregel ist nur für das HTML-Element gültig, dessen id-Attribut der ID-Angabe im Selektor entspricht. | #special3 p#special52 |
| Pseudoelement-Selektor (CSS2) | Stilregel ist nur für Pseudoelemente gültig. | p:first-letter p:first-line h1:first-child |
| Pseudoklassen-Selektor (CSS2) | Stilregel ist nur für Pseudoklassen gültig, wenn sie ihren Zustand durch Interaktion mit dem Benutzer verändern. | a:hover a:active a:focus a:link a:visited body:lang(d) |
| Selektor für Nachfahren | Stilregel ist nur für das im Selektor rechts stehende HTML-Element gültig, wenn es in der Vererbung ein Nachfahre des links stehenden HTML-Elements ist. | p em p.wide em |
| Selektor für direkt über- und untergeordnete Elemente (CSS2) | Stilregel ist nur für das im Selektor rechts stehende HTML-Element gültig, wenn es dem links stehenden HTML-Element direkt untergeordnet ist. | body > p |
| Selektor für benachbarte Elemente (CSS2) | Stilregel ist nur für das im Selektor rechts stehende HTML-Element gültig, wenn es im HTML-Dokument ein unmittelbarer Nachbar des links stehenden HTML-Elements ist. | h1 + h2 p + h3 |
| Attribut-Selektor (CSS2) | Stilregel ist nur für HTML-Elemente gültig, die die im Selektor angegebenen Attribute bzw. Attributwerte enthalten. | p[align] input[type="text"] img[alt~="none"] body[lang|="en"] |
Im folgenden Beispiel definieren wir die Text- und Hintergrundfarbe aller Hyperlinks, sie erscheinen weiß auf grünem Hintergrund:
a {
color: white;
background-color: green;
}| Tipp der data2type-Redaktion: Zum Thema CSS bieten wir auch folgende Schulungen zur Vertiefung und professionellen Fortbildung an: |
Copyright © 2006 der deutschen Übersetzung dpunkt.verlag GmbH
Für Ihren privaten Gebrauch dürfen Sie die Online-Version ausdrucken.
Ansonsten unterliegt dieses Kapitel aus dem Buch "CSS − Anspruchsvolle Websites mit Cascading Stylesheets" denselben Bestimmungen, wie die gebundene Ausgabe: Das Werk einschließlich aller seiner Teile ist urheberrechtlich geschützt. Alle Rechte vorbehalten einschließlich der Vervielfältigung, Übersetzung, Mikroverfilmung sowie Einspeicherung und Verarbeitung in elektronischen Systemen.
dpunkt.verlag GmbH, Ringstraße 19, 69115 Heidelberg