CSS 2.1: Selektoren, Pseudoklassen und Pseudoelemente

(Auszug aus "CSS Kochbuch" von Christopher Schmitt)

Neben dem Wissen um die CSS-Eigenschaften selbst ist es mindestens genauso wichtig, sich damit auszukennen, wie die Stildefinitionen den korrekten Elementen zugeordnet werden können. Diese Seite enthält drei Referenztabellen, die Ihnen zeigen, wie Sie die Stilregeln den richtigen Elementen zuweisen können.

Die erste Tabelle enthält die CSS 2.1-Selektoren. Selektoren helfen dem Browser, die von Ihnen definierten CSS-Deklarationen auf die Elemente anzuwenden.

Hinweis:
Die Werte C, R und S in der Spalte "Muster" stehen für die einzelnen Selektoren.

Die zweite Tabelle enthält eine Liste der Pseudoklassen. Mit Hilfe von Pseudoklassen kann ein Browser auch auf Elemente oder Teile davon zugreifen, die nicht speziell markiert werden können. So gibt es beispielsweise Pseudoklassen für die verschiedenen Zustände der allgegenwärtigen Links (visited, hover etc.).

Die dritte Tabelle enthält eine Liste der Pseudoelemente. Im Gegensatz zu den Pseudoklassen umgeben Pseudoelemente ein Element quasi mit unsichtbaren Tags, sodass dem Element ohne zusätzliches Markup Stile zugewiesen werden können. Da die Struktur der Pseudoelemente mehr Ähnlichkeit mit einem normalen Element hat als mit einer Klasse, wurde dieser Name gewählt.

Tabelle: CSS 2.1-Selektoren.

Selektor Muster Beschreibung Beispiel
Universeller Selektor * Passt auf den Namen eines beliebigen Elements. * { text-decoration: none; }
Typ-Selektor C Passt auf alle Elemente mit dem Namen C, im Beispiel auf alle h2-Elemente. h2 { font-weight: normal; }
Nachfahren-Selektor (Kontext-Selektor) C R S Passt auf alle Elemente mit dem Namen S, die Nachfahren des Elements R sind, das seinerseits ein Nachfahre von C sein muss. div#content p em { background- color: yellow; }
Kind-Selektor C > S Passt auf alle Elemente mit dem Namen S, die ein direkter Nachfahre von C sind. li > ul { list-style-type: circle; }
Selektor für benachbarte Geschwisterelemente C + S Wählt ein Element mit dem Namen S aus, das direkt auf ein Element mit dem Namen C folgt. div#content+p { text-indent: 0; }
Gruppierte Selektoren C, R, S Mehreren durch Kommata getrennten Selektoren können die gleichen Regeln zugewiesen werden. h1, h2, h3, h4 { color: #0cf; }
Klassen-Selektor C.classR Passt auf alle Elemente mit dem Namen C, deren Attribut class den Wert classR hat. img.content { padding: 4px; border: 1px solid black; }
ID-Selektor C#idR Passt auf das Element mit dem Namen C, dessen Attribut id den Wert idR hat. div#content { color: #333; }
Einfacher Attribut-Selektor C[Attribut] Passt auf alle Elemente mit dem Namen C, die das genannte Attribut besitzen. a[link] { text-decoration: none; }
Selektor für exakte Attributwerte C[attribute="valueR"] Passt auf alle Elemente mit dem Namen C, deren Attribut den Wert valueR hat. input[type="text"] { width: 33%; }
Selektor für teilweise Attributwerte C[attribute~="valueR"] Passt auf Elemente mit dem Namen C, deren Attribut eine Liste mit durch Leerzeichen getrennten Werten enthält. Einer dieser Werte muss valueR entsprechen. div.advertisement form[class~="login"] { float: left; margin-left: 7px; }
Selektor für Sprachattribute C[attribute|="valueR"] Hauptsächlich gedacht für Sprachattribute. Passt auf Elemente mit dem Namen C, deren Attribut eine Liste mit durch Bindestriche (-) getrennten Werten enthält. Der erste dieser Werte muss valueR entsprechen. warning[lang="uk"]:after { content: "Blimey!"}

  

Tabelle: CSS 2.1-Pseudoklassen.

Pseudoklasse Muster Beschreibung Beispiel
:first-child C:first-child Passt auf das erste Kindelement von Elementen mit dem Namen C. divs p:first-child { color: white; background-color: red; }
:link C:link Passt auf Elemente mit dem Namen C, die einen bisher "unbesuchten" Link enthalten. a:link { text-decoration: none; }
:visited C:visited Passt auf Elemente mit dem Namen C, die einen bereits "besuchten" Link enthalten. a:visited { font-weight: normal; }
:hover C:hover Passt auf Elemente mit dem Namen C, die gerade ausgewählt sind (typischerweise, indem sich der Mauszeiger über dem Element befindet), aber noch nicht aktiviert sind. a:hover { background-color: orange; }
:active C:active Passt auf Elemente mit dem Namen C, die aktiviert wurden (z.B. ein gerade angeklickter Link). a:active { color: green; }
:focus C:focus Passt auf das Element mit dem Namen C, das gerade den Fokus hat (typischerweise ein Eingabefeld eines Formulars). input:focus { background-color: #F7F7D5; }
:lang C:lang(R) Passt auf Elemente mit dem Namen C, deren Attribut lang den Wert R hat. p:lang(en) { font-weight: bold; }

  

Tabelle: CSS 2.1-Pseudoelemente.

Pseudoelement Muster Beschreibung Beispiel
:first-line C:first-line Passt auf die erste Zeile des Elements mit dem Namen C. h2+p:first-line { color: #727977; }
:first-letter C:first-letter Passt auf den ersten Buchstaben des Elements mit dem Namen C . h1:first-letter { font-size: 66%; text-transform: lowercase; }
:before C:before Platziert erzeugte Inhalte vor dem Element mit dem Namen C; wird zusammen mit der Eigenschaft content verwendet. ul.tracklisting li:before { content: "Titel des Stücks"; }
:after C:after Platziert erzeugte Inhalte nach dem Element mit dem Namen C; wird zusammen mit der Eigenschaft content verwendet. div#footer p.copyright:after { content: "Sehr wahr!"; }

  

<< zurück vor >>

 

 

 

Tipp der data2type-Redaktion:
Zum Thema CSS bieten wir auch folgende Schulungen zur Vertiefung und professionellen Fortbildung an:

Copyright der deutschen Ausgabe © 2007 by O’Reilly Verlag GmbH & Co. KG
Für Ihren privaten Gebrauch dürfen Sie die Online-Version ausdrucken.
Ansonsten unterliegt dieses Kapitel aus dem Buch "CSS Kochbuch" 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.

O’Reilly Verlag GmbH & Co. KG, Balthasarstr. 81, 50670 Köln