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