Websiteentwicklung: CSS: Pseudoklassen, Pseudoelemente und erzeugte Strukturen

Zurück zu Listen | Hoch zu CSS | Vor zu Seitenmedien

Pseudoelemente und Pseudoklassen stellen spezielle Selektoren dar. Während sich die üblichen Selektoren auf Elemente beziehen, die in bestimmter Weise in der Dokumentstruktur stehen, gehen die Pseudo-Strukturen über diese einfache Methode der Selektion hinaus und ermöglichen es auch, Elemente oder Strukturen zu selektieren, die etwa in einem besonderen Zustand sind oder sich auch an einer bestimmten Stelle in einer Struktur befinden.

Besondere Strukturen, die nicht als Elemente selektierbar sind, aber über Pseudoelemente selektierbar sind, sind etwa das erste Textzeichen oder die erste Zeile des Inhaltes eines Elementes. Mit Pseudoelementen können auch Strukturen vor oder nach dem Inhalt eines Elementes eingefügt werden, etwa eine automatische Numerierung oder Anführungszeichen bei Zitaten, aber es können auch inhaltlich nicht relevante Texte oder Bilder hinzugefügt werden.

Pseudoklassen selektieren zumeist Strukturen, die in einem besonderen Zustand sind.

Pseudoklassen

Pseudoklassen für Verweise - :link, :visited

Bei Verweisen kann unterschieden werden, ob diese schon besucht worden sind oder noch nicht. Mit der Pseudoklasse :link werden Verweise selektiert, welche noch nicht besucht wurden. Mit der Pseudoklasse :visited werden Verweise selektiert, nachdem sie besucht worden sind.

Hinsichtlich des Datenschutzes und der Privatsphäre kann ein Darstellungsprogramm auch alle Verweise als noch nicht besucht betrachten, um zu vermeiden, dass ein Autor über die Stilvorlage und die Verwendung der Pseudoklasse :visited herausbekommen kann, welche Seiten der Nutzer bereits besucht hat. Ferner kann bei dynamisch erzeugten Seiten oder solchen, die aufgrund der Übergabe von get- oder post-Parametern erzeugt werden, nicht pauschal davon ausgegangen werden, dass der Nutzer den Inhalt bereits kennt, was dann ebenfalls dazu führen kann, dass :visited bei solchen Verweiszielen keinen Effekt erzielt.

Beispiel:

a:link {outline: thin solid blue}
a:visited {outline: thin solid #a0f}

Unbesuchte Verweise werden damit also blau abgegrenzt, besuchte violett.

Pseudoklasse für Verweisziel - :target

Mit :target wurde mit CSS3 eine neue Pseudoklasse eingeführt, mit welcher Verweisziele selektiert werden können.

Dies trifft zu auf Formate wie (X)HTML und SVG, bei denen man Fragmente mit Fragmentidentifiziern kennzeichnen kann und diese dann bei einem Verweis als Ziel im selben oder einem anderen Dokument angeben kann. In (X)HTML notiert man etwa in dem Zusammenhang beim Element a das Attribut href mit einem Fragmentidentifizierer als Wert, zum Beispiel href='#unten', was dann zu einem Element führt, für welches notiert ist: id='unten'. Bei einem Fragment in einem anderen Dokument wird die Struktur entsprechend angehängt, etwa so: href='index.xhtml#unten'. Wurde jedenfalls der Fragmentidentifizierer nicht aufgerufen, trifft auch die Pseudoklasse nicht zu. Da maximal ein Fragmentidentifizierer aufgerufen werden kann, kann die Pseudoklasse offenbar auch nur auf maximal ein Element zutreffen.

Beispiel:

*:target {background: rgba(0,0,255,0.1)}

Oder vielleicht nur mit einer Markierung vor dem betroffenen Element (::before wird in einem der nächsten Abschnitte erläutert):

*:target {
  position: relative
}
*:target::before {
  position: absolute; 
  display: block; 
  width: 1ex; 
  height:1ex;
  left: -1.5ex;
  background: rgba(0,0,255,0.5);
  content: ''
}

Dynamische Pseudoklassen - :hover, :active, :focus

Ermöglicht ein Darstellungsprogramm die interaktive Nutzung von Inhalten, so gibt es auch Möglichkeiten, besondere Zustände von Elementen zu selektieren. Dabei ist auch zu bedenken, dass CSS nicht präzise den Zeitablauf definiert. Anders als bei Ereignissen, die etwa bei SVG zur deklarativen Animation verwendet werden oder auch bei Skripten, kennzeichnen Zustände keinen präzisen Zeitpunkt, sondern bei CSS eher einen ungefähren Zeitabschnitt, welcher gegebenenfalls einen Anfang und ein Ende haben kann, aber nicht muß.

Mit der Pseudoklasse :hover können Elemente selektiert werden, welche sich im Zustand der Aufmerksamkeit des Nutzers oder der Markierung oder der Auswahl befinden, ohne es aber zu aktivieren. Bei gängigen interaktiven Darstellungsprogrammen und der Nutzung eines Zeigergerätes wie einer Maus wird dieser Zustand erreicht, indem sich das Zeigergerät über dem Element befindet. Wichtig dabei ist, dass nicht interaktive Darstellungsprogramme diesen Zustand nicht umsetzen können. Ebenso kann solch ein Zustand ausgeschlossen sein, wenn das verwendete Gerät kein Zeigergerät hat, welches sich permanent über etwas befindet, beziehungsweise kann der Zustand dann schwierig vom Nutzer aufrecht zu erhalten sein. Dies kann etwa der Fall sein bei Geräten, die nicht über ein Zeigergerät verfügen, sondern der Nutzer seine Finger oder einen Stift auf einer sensitiven Oberfläche zur Steuerung verwendet. Entsprechend darf die Funktion oder der Informationsgehalt eines Projektes nicht von der Funktion dieser Pseudoklasse abhängen, wird sie in einer Stilvorlage verwendet. Besonders problematisch ist dabei ein durchaus häufiger Anwendungsfall, bei dem Inhalte zunächst statisch per 'display: none' aus der Darstellung entfernt werden, durch Verwendung von :hover beim Elternelement aber wieder eingeblendet werden. Ist die Funktion von :hover nicht gegeben oder vom Nutzer nicht hinreichend einfach aufrecht zu erhalten, können so Inhalte unzugänglich werden und der Nutzer kann gezwungen sein, die gesamte Stilvorlage zu deaktivieren, um sich den Inhalt zugänglich zu machen.

Leider stellt CSS 2 keine Pseudoklasse zur Verfügung, die zutrifft, wenn der Zustand :hover vom Darstellungsprogramm realisierbar ist, aber gerade nicht zutrifft. Hilfsweise könnte das Ausblenden etwa ebenfalls mit der Pseudoklasse :hover etwa beim Wurzelelement erfolgen. Siehe aber auch den Abschnitt über den Negations-Selektor :not von CSS3 weiter unten.

Die Pseudoklasse ist ansonsten bei allen Elementen anwendbar. Beliebt ist es zum Beispiel für Farbänderungen (nicht nur) bei Verweisen:

a:link {outline: thin solid blue}
a:visited {outline: thin solid #a0f}
a:link:hover {text-decoration: underline}
a:visited:hover {text-decoration: line-through}

Oder wenn die Verweise in Listen angeordnet sind, kann statt des Verweises selbst auch einfach die Block-Box anders dekoriert werden:

ul.menu > li {border-left: 1ex solid blue}
ul.menu > li:hover {border-left: 1ex solid red}

Mit der Pseudoklasse :active können Elemente selektiert werden, die sich gerade im Zustand der Aktivierung durch den Nutzer befinden, die gerade aktiv sind. Bei der Verwendung einer Maus könnte dies etwa während des Anklickerns der Fall sein. Aktivierung ist allerdings eher unabhängig von der Eingabemethode als :hover, so kann man etwas etwa auch per Tabulator/Tastatur aktivieren.

Nicht nur Verweise können aktivierbar sein, generell ist dies bei allen Elementen der Fall, die auswählbar oder anwählbar sind.

Beispiel:

a:link    { color: blue }
a:visited { color: #a0a }
a:hover   { color: red }
a:active  { color: #6f0 }

Mit dieser Reihenfolge wird erreicht, dass alle Farben einmal angenommen werden. Würde man etwa :hover hinter :active angeben, könnte man :active allenfalls bei Geräten sehen, welche den Zustand :hover nicht umsetzen können. Bei Verwendung einer Maus als Zeigergerät hingegen ist praktisch immer der Fall gegeben, dass sich der Mauszeiger über dem Element befindet, wenn es aktiviert wird.

Mit der Pseudoklasse :focus werden Elemente ausgewählt, welche gerade den Fokus haben, also etwa per Bedienung über die Tastatur oder auch bei einer Textangabe eines Formulars. Das verwendete Format sollte festlegen, welche Element fokussierbar sind. Zum Beispiel gibt es in SVG tiny 1.2 zusätzlich das Attribut focusable mit dem vom Autor festgelegt werden kann, ob ein Element fokussierbar ist oder nicht. Das ist bei SVG besonders relevant, weil da jedes Element dazu dienen kann, eine deklarative Animation zu beginnen oder zu beenden, es also dann sinnvoll ist, solch ein Element mit der Funktion eines Knopfes fokussieren zu können. Im Bedarfsfalle könnte man also bei SVG tiny 1.2 einem Element auch zeitweise die Fokussierbarkeit entziehen, um die Bedienung eines solchen Knopfes zeitweise zu unterbinden.

Beispiel:

a {background: white; color: blue}
a:hover {color: red }
a:focus {backround: yellow; color: #080}
a:focus:hover {backround: #ffc; color: #066}

Je nachdem, welche Pseudoklassen zutreffen, gibt es also eine andere Farbe und Hintergrundfarbe. Treffen :focus und :hover gleichzeitig zu, gibt es eine weitere bunte Variante.

Pseudoklasse für die Sprache - :lang

Unterschiedliche Formate können unterschiedliche Methoden haben, um die im Text verwendete Sprache zu kennzeichnen. Bei XML-Formaten kann ganz allgemein etwa das Attribut xml:lang verwendet werden.

Mittels der Pseudoklasse :lang kann ein Element entsprechend einer Sprachangabe selektiert werden. Neben der allgemeinen Methode mit xml:lang bei XML-Formaten kann die Sprache auch anders festgelegt sein, bei HTML etwa mit dem Attribut lang.

Verwendet wird zur Selektion die Angabe des internationalen Sprachkürzels in Klammern, also für deutsch etwa: :lang(de).

In verschiedenen Sprachen werden etwa für Anführungszeichen andere Zeichen verwendet. Für Zitate gibt es aber etwa in (X)HTML spezielle Elemente, weswegen bei diesen die Anführungszeichen vom Darstellungsprogramm automatisch zu setzen sind, nicht vom Autor. Dieser kann aber wiederum über die Stilvorlage Einfluß darauf nehmen, welche Zeichen verwendet werden. So kann man für mehrsprachige (X)HTML-Seiten für Zitate etwa formulieren:

q:lang(en) { quotes: '"' '"' "'" "'" }
q:lang(da) { quotes: "» " " «" '\203A ' ' \2039'}
q:lang(fr) { quotes: '« ' ' »' '\2039 ' ' \203A' }
q:lang(de) { quotes: '\201E' '\201C' '\201A' '\2018' }

Die Stilvorlage funktioniert dann also unabhängig davon, ob man sie für XHTML mit dem Attribut xml:lang verwendet oder für HTML mit lang.

Pseudoklassen für Zustände interaktiver Elemente - :enabled, :disabled, :checked, :indeterminate

Insbesondere, aber nicht zwangsläufig nur bei Eingabeelementen von Formularen können diese einen bestimmten, durch Nutzer-Interaktion oder Vorgabe des Autors bestimmten Status annehmen. CSS3 bietet nun einige Pseudoklassen als Selektoren für Elemente in solchen Zuständen.

Mit der Pseudoklasse :enabled werden freigegebene oder aktivierte Elemente selektiert. Umgedreht werden mit der Pseudoklasse :disabled deaktivierte oder nicht freigegebene Elemente selektiert. Zutreffend ist beides nur für Elemente, die sowohl einen aktivierten als auch einen deaktivierten Status haben können. Welche Elemente dies sind, ist von der verwendeten Sprache abhängig. Bei (X)HTML können etwa Eingabeelemente von Formularen als disabled oder readonly markiert werden, das wären also Beispiele für Elemente, auf welche die Pseudoklassen zutreffen.

In (X)HTML gibt es auch Formulareingaben in Form von Auswahlboxen vom Typ 'radio' oder 'checkbox'. Diese können vom Nutzer wechselseitig ein- und ausgestellt werden. Auch andere Formulareingaben können vom Nutzer ausgewählt oder markiert werden (Attribute selected und checked). Solche ausgewählten oder selektierten Elemente können mittels der Pseudoklasse :checked selektiert werden. Allerdings können Auswahlboxen vom Typ 'radio' oder 'checkbox' auch in einem Zustand sein, der weder 'ein' noch 'aus' ist, ihr Zustand ist dann unbestimmt, was etwa eintreten kann, wenn im Quelltext des Dokumentes einer Radio-Gruppe keines der Elemente als ausgewählt markiert ist. Mit der Pseudoklasse :indeterminate können solche Elemente mit unbestimmtem Status selektiert werden.

Wurzelelement - :root

Zur Selektion des Wurzelelementes eines Dokumentes stellt CSS3 die Pseudoklasse :root bereit. Während bei (X)HTML-Dokumenten das als Wurzelelement zu verwendende html nur einmal im Dokument auftritt, kann etwa in SVG das Element svg auch anderweitig verwendet werden, nicht nur als Wurzelelement. Auch wenn XHTML in ein anderes Format eingebettet wird, ist html, sofern verwendet, nicht mehr das Wurzelelement, welches dann vom einbettenden Format bereitgestellt wird. Daher kann es also notwendig sein, ein Element direkt mit der Pseudoklasse :root zu selektieren und nicht direkt über den Selektor für den Elementnamen. Die Selektion des Wurzelelementes erfolgt damit folglich auch unabhängig vom verwendete Format.

Pseudoklassen für Kindelemente

:first-child

Mit der Pseudoklasse :first-child wird ein Element selektiert, welches das erste Kindelement eines anderen Elementes ist.

Gegeben sei etwa folgendes XHTML-Fragment:

<h1>Mitglieder der Musikgruppe 
   '<i>Was Euch Gefällt</i>'</h1>
<ul id="WEG">
<li>Rahner Zupfall</li>
<li>Willma Flöhten</li>
<li>Llama Hunt</li>
<li>Machma Pausä</li>
<li>Tol Kün</li>
<li>Puddel Wol</li>
</ul>

Das CSS sehe wie folgt aus:

#WEG:first-child {font-style: italic}
h1:first-child {background: #006; color:#ffc}

Zum einen wird also der Listenpunkt mit dem Inhalt 'Rahner Zupfall' ausgewählt, welcher dann kursiv dargestellt wird. Zum anderen wird der Inhalt des Elementes i im Element h1 hellgelb auf dunkelblauem Grund dargestellt. Das liegt auch daran, dass der vorangehende Text in der Überschrift eine anonyme Box darstellt, die nicht selektierbar ist, folglich ist das i das erste Kindelement.

:last-child

Mit der in CSS3 eingeführten Pseudoklasse :last-child kann auch das letzte Kind selektiert werden. Entsprechend dem vorherigen Beispiel zu :first-child bekommt man dann:

#WEG:last-child {font-style: italic}

Nun wird also der Listenpunkt mit dem Inhalt 'Puddel Wol' ausgewählt, welcher dann kursiv dargestellt wird.

:only-child

Ist ein Element einziges Kindelement eines Elternelementes, so ist dieses in CSS3 mittels :only-child selektierbar. Das entspricht zum Beispiel der Selektorkombination :first-child:last-child.

:nth-child()

Wenn es erstmal die Möglichkeit gibt, das erste und letzte Kind auszuwählen, ist es naheliegend, dass auch das Bedürfnis aufkommt, jedes andere Kind gezielt anhand seiner Anordnung auswählen zu können. Dies ist möglich mit der in CSS3 eingeführten Pseudoklasse :nth-child().

In der Klammer wir dann ein Ausdruck notiert, welcher angibt, welches Kind selektiert werden soll. Seien a und b Variablen für ganze Zahlen, so ist der in der Klammer zu notierende Ausdruck: 'anb'.

Bei a ist die Angabe eines Vorzeichens bei einer nicht negativen Zahl optional, bei b ist das Vorzeichen immer anzugeben.
Bei a = 0 kann der vordere Teil auch weggelassen werden, also nur 'b'. Dann ist für b auch das Vorzeichen optional.
Ist a = 1 oder a= -1, so kann a auch weggelassen werden, also nur 'nb'.
Ist ferner b = 0 darf auch dieser Teil weggelassen werden, also nur 'an' oder 'n'.

Für jede nicht negative ganze Zahl n wird dann jedes Element ausgewählt, welches das Kind a * n + b des Elternelementes ist. Leerzeichen zwischen den Strukturen sind erlaubt, also etwa auch ' -1 n + 3 ', insbesondere also bei b auch ein Leerzeichen zwischen dem Vorzeichen und der Zahl, aber nur, falls vor dem Vorzeichen noch wenigstens das 'n' steht.

Beispiele:

• '0n+3' oder '+3' wählt das dritte Element aus, in obigem Beispiel also 'Machma Pausä'.
• '2n+0' wählt jedes gerade Elemente aus, in obigem Beispiel also 'Willma Flöhten', 'Machma Pausä' und 'Puddel Wol'.
• '2n+1' wählt jedes ungerade Elemente aus, in obigem Beispiel also 'Rahner Zupfall', 'Llama Hunt' und 'Tol Kün'.
• '3n-2 wählt die Elemente 1, 4, 7, 10 etc aus, in obigem Beispiel also 'Rahner Zupfall' und 'Machma Pausä'.
• '-2n+1' oder '0n+1' oder '1' wählt das erste Element aus, in obigem Beispiel also 'Rahner Zupfall'.
• '-1n+3' wählt die Elemente 3, 2, 1 aus, in obigem Beispiel also 'Rahner Zupfall', 'Willma Flöhten', 'Llama Hunt'.
• '-2n+5' wählt die Elemente 5, 3, 1 aus, in obigem Beispiel also 'Tol Kün', 'Llama Hunt' und 'Rahner Zupfall'

Statt '2n+0' darf auch das Schlüsselwort 'even' notiert werden und statt '2n+1' auch das Schlüsselwort 'odd'.

:nth-last-child()

Statt von vorne, kann man auch von hinten zählen, dazu dient die Pseudoklasse :nth-last-child() von CSS3. Die Syntax für den in der Klammer zu notierenden Ausdruck ist dieselbe wie für :nth-child(), es wird nur beim letzten Element zu zählen begonnen.

Beispiele:

• '0n+3' oder '+3' wählt das drittletzte Element aus, in obigem Beispiel also 'Machma Pausä'.
• '2n+0' wählt jedes gerade Elemente aus, in obigem Beispiel also 'Tol Kün', 'Llama Hunt' und 'Rahner Zupfall'.
• '2n+1' wählt jedes ungerade Elemente aus, in obigem Beispiel also 'Puddel Wol', 'Machma Pausä' und 'Willma Flöhten'.
• '3n-2 wählt von hinten die Elemente 1, 4, 7, 10 etc aus, in obigem Beispiel also 'Puddel Wohl' und 'Llama Hunt'.
• '-2n+1' oder '0n+1' oder '1' wählt das letzte Element aus, in obigem Beispiel also 'Puddel Wol'.
• '-1n+3' wählt von hinten die Elemente 3, 2, 1 aus, in obigem Beispiel also 'Puddel Wol', 'Tol Kün' und 'Machma Pausä'.
• '-2n+5' wählt von hinten die Elemente 5, 3 aus, in obigem Beispiel also 'Machma Pausä' und 'Willma Flöhten'.

Pseudoklassen für bestimmte Elemente aus der Gruppe mit demselben Elementnamen

Während sich die vorherigen Pseudoklassen auf alle Kindelemente bezogen, ist es in CSS3 auch möglich, bestimmte Elemente zu selektieren als Untermenge all jener Elemente mit demselben Elementnamen und als Kinder eines gemeinsamen Elternelementes.

:nth-of-type()

Während sich die vorherigen Pseudoklassen auf alle Kindelemente bezogen, werden mit :nth-of-type() von CSS3 nur Elemente eines bestimmten Typs selektiert, also mit demselben Elementnamen. Die Syntax für den Klammerausdruck und die sonstige Bedeutung ist dieselbe wie für :nth-child().

Beispiel, um Bilder in (X)HTML abwechselnd links und rechts umfließen zu lassen:

img:nth-of-type(2n+1) {float: right}
img:nth-of-type(2n) {float: left}

:nth-last-of-type()

Die Pseudoklasse :nth-last-of-type() von CSS3 entspricht :nth-of-type(), nur wird hier wie bei :nth-last-child() von hinten gezählt, die Syntax des Klammerausdruckes entspricht wieder der von :nth-child().

Beispiel, um alle bis auf den ersten und letzten Absatz eines Kapitels auszuwählen (das Kapitel stehe in einem Element der Klasse 'Kapitel'):

.Kapitel  p:nth-of-type(n+2):nth-last-of-type(n+2) {
background: #ff0; color:#00a
}

Oder für obigen Beispielliste:

#WEG > li:nth-of-type(n+2):nth-last-of-type(n+2) {
background: #ff0; color:#00a
}

Dies wählt in obiger Liste folgende aus: 'Willma Flöhten', 'Llama Hunt', 'Machma Pausä', 'Tol Kün'.

:first-of-type und :last-of-type

Analog zu :first-child und :last-child ist es nach CSS3 auch direkt möglich, das erste und letzte Element eines bestimmten Typs zu selektieren. :first-of-type wählt das erste Element eines Typs aus, :last-of-type das letzte.

Beispiel zu obiger Liste:

#WEG > li:first-of-type, 
#WEG > li::last-of-type {
background: #ff0; color:#00a
}

Das selektiert dann offenbar 'Rahner Zupfall' und 'Puddel Wol'.

:only-of-type

Ist ein Element einziges Kindelement eines bestimmten Typs eines Elternelementes, so ist dieses in CSS3 mittels :only-of-type selektierbar. Das entspricht zum Beispiel der Selektorkombination :first-of-type:last-of-type.

Pseudoklasse für Element ohne Kinder - :empty

Hat ein Element keine Kindelemente, kann es mit :empty selektiert werden

Folgende XHTML-Elemente sind zum Beispiel in diesem Sinne als leer anzusehen:

<div></div>
<div title="Gedankenlose Struktur"/>

Folgende sind als nicht leer anzusehen:

<div>


</div>
<p> Dies ist ein kurzer Gedankengang.</p>

Negations-Selektor - :not

Mit dem Negationsselektor :not von CSS 3 ist es möglich, einen einfachen, nicht zusammengesetzten Selektor zu negieren. Die Syntax dazu ist ein angehängter Ausdruck, der den zu negierenden Selektor enthält. Stellt 'X' einen Selektor dar, so ist also zu notieren ':not(X)'. :not darf nicht selbst der zu negierende Selektor sein.

Einfache Selektoren in diesem Sinne sind:
Elementselektor, Universalselektor, Attributselektor, Klassenselektor, Fragmentselektor, Pseudoklasse.
Ein Pseudoelement, wie in folgenen Abschnitten erläutert, ist in diesem Sinne kein einfacher Selektor, ebensowenig wie zusammengesetzte Selektoren.

Beispiel:

ul.nav > li:not(:hover) > ul {display: none}
ul.nav > li:hover > ul {display: block}

Das könnte sinnvoll sein für eine Navigation, bei der Untermenüs aufklappen sollen, wenn über einen Eintrag des übergeordneten Menüs gefahren wird. Per 'display: none' werden diese Untermenüs nur entfernt, wenn nicht mit einem Zeigergerät über den übergeordneten Menüeintrag gefahren wird. Da allerdings :hover nicht sehr präzise definiert ist, ist ausgiebig zu testen, wie dieser Negations-Selektor wirklich in Zusammenhang mit :hover implementiert ist, um herauszufinden, ob sich dieser Mechanismus dafür eignet, alle Inhalte aufgeklappt zu halten, falls :hover gar nicht verfügbar ist. In der Hinsicht ist die Definition in CSS 3 für :not nicht sehr präzise.

Beispiel:

h1:not(.top) {margin: 1ex; padding:2em}

Das trifft dann auf alle Überschriften h1 zu, die nicht zur Klasse 'top' gehören.

Beispiel:

a:not([href]) {text-decoration: none}

Keine Textdekoration, wenn das Element a kein Verweis ist.

Pseudoelemente

Bis Version CSS 2.1 teilen Pseudoelemente mit Pseudoklassen dieselbe Notation mit vorangehendem Doppelpunkt. Gemäß dem betreffenden CSS3-Modul ist allerdings zur Unterscheidung für Pseudoelemente ein vorangehender Doppelpunkt zu verwenden, bei Pseudoelementen, die bereits in CSS 2.1 definiert sind, kann jedoch auch die alte Notation mit einem vorangehenden Doppelpunkt verwendet werden. Es empfiehlt sich allerdings pro Dokument eine einheitlich Verwendung, wenn also Pseudoklassen von CSS3 im Dokument verwendet werden, sollten alle Pseudoklassen mit vorangehendem doppelten Doppelpunkt verwendet werden.

Erste Zeile

Die erste Zeile eines Block-Elementes kann mit dem Pseudoelement :first-line selektiert werden. Zum Beispiel könnte so eine (alternative) Präsentation von Absätzen erreicht werden, zum Beispiel:

p:first-line {text-transform: capitalize}

Die anwendbare Eigenschaften sind jedoch eingeschränkt auf jene für Schriftarten, Farbe, Hintergrund, word-spacing, letter-spacing, text-decoration, text-transform und line-height. Die Interpretation anderer Eigenschaften ist für das Darstellungsprogramm optional erlaubt.

Erster Buchstabe

Der erste Buchstabe oder allgemeiner die erste Glyphe der ersten Zeile eines Blockes kann mit dem Pseudoelement :first-letter selektiert werden, falls diesem kein anderer Inhalt vorangeht, etwa Bilder oder inzeilige Tabellen. Dabei sollte vorangehende Zeichensetzung wie etwa Anführungszeichen oder etwa das spanische umgedrehte Fragezeichen mit in dieses Pseudoelement einbezogen werden. Entsprechend gelten auch Ligaturen oder Zahlen als mögliche Kandidaten für :first-letter. Beginnt das Blockelement in (X)HTML aber etwa mit einem erzwungenen Zeilenumbruch per Element br, so enthält die erste Zeile kein Zeichen, das Pseudoelement wird also gar nicht angewendet.

Das Pseudoelement bietet also eine weitere (alternative) Möglichkeit, um zum Beispiel Absätze zu kennzeichnen. Bekannt ist etwa bei älteren, typographisch aufwendig gestalteten Büchern, dass der Beginn eines Kapitels oder Absatzes mit einem besonders großen und speziell dekorierten Anfangsbuchstaben beginnt, der gegebenenfalls von den folgenden Zeilen umflossen wird.

Anwendbar sind bei dem Pseudoelement Eigenschaften für Schriftarten, Farbe, Hintergrund, Außen- und Innenabstände, Ränder, word-spacing, letter-spacing, text-decoration, text-transform, line-height, float und vertical-align. Die Interpretation anderer Eigenschaften ist für das Darstellungsprogramm optional erlaubt.

Beispiel für einen vergrößerten, umflossenen Anfangsbuchstaben eines Elementes der Klasse 'kapitel':

.kapitel:first-letter {color: #006;
                       background: #ff0;
                       font-size: 2em; 
                       font-style: italic;
                       font-weight: bold; 
                       float: left}

Erzeugte Strukturen

Mit den Pseudoelementen :before und :after können Strukturen erzeugt und in die Darstellung eingefügt werden. Da CSS nur eine Stilvorlagensprache ist und daher nicht die Aufgabe hat, den eigentlich relevanten Inhalt von Dokumenten zu erzeugen, sollte man die in CSS verwendete saloppe Verwendung des Wortes 'Inhalt' (englisch: content) nicht in dem Sinne mißverstehen, dass man damit inhaltlich relevante Strukturen hinzufügen könnte. Aber ähnlich wie mit display: none auch relevanter Inhalt von der Präsentation ausgeschlossen werden kann, so kann mit diesen Pseudoelementen auch etwas eingefügt werden, was inhaltlich allerdings per Definition nicht relevant ist und somit auch aus Sicht des Autors nicht relevant sein darf. Gleichwohl können solche Ausgaben aber die Ergonomie und Verständlichkeit eines Projektes verbessern, gerade auch wenn die Strukturen im Sinne von Hilfen für die akustische oder taktile (Braille) Präsentation verfügbar gemacht werden.

Mit diesen Pseudoelementen gibt es auch einen Mechanismus einer automatischen Numerierung, also bei Listen etwa die Listennumerierung. Eine automatische Numerierung ist allerdings gelegentlich auch bei einer Strukturierung mit Kapiteln und Überschriften hilfreich und möglich.

:before, :after und content

Mit den Pseudoelementen :before und :after kann angegeben werden, wo erzeugte Strukturen im Dokument einzuordnen sind. Bei Verwendung von :before wird die Struktur vor dem Inhalt des Elementes eingeordnet, bei :after danach. Mittels content wird angegeben, was eingeordnet wird. Andere Eigenschaften werden angegeben, um festzulegen, wie die Struktur dargestellt werden soll. :before und :after erzeugen so Boxen, die genau wie im Dokument vorhandene Elemente behandelt werden.

content

Die Eigenschaft ist anwendbar bei allen Medien und wirkt auf die Pseudoelemente :before und :after. Die Eigenschaft wird nicht vererbt, der Initialwert ist das Schlüsselwort 'normal'.

Der Wert ist entweder eines der Schlüsselwörter 'normal', 'none' oder 'inherit' oder eine Liste, deren mögliche Listenpunkte im Folgenden noch erläutert werden. Die Liste enthält mindestens einen Listenpunkt.

Bei 'none' wird das Pseudoelement nicht erzeugt. Bei 'normal' entspricht der berechnete Wert 'none' für :before und :after.

Mögliche Listenpunkte sind eine Zeichenkette, eine URI/IRI, ein Zähler, ein Kennzeichner für einen Attributwert und die Schlüsselwörter 'open-quote', 'close-quote', 'no-open-quote' und 'no-close-quote'.

Bei dem Schlüsselwort 'open-quote' wird jene Zeichenkette verwendet, die per Eigenschaft quotes als öffnendes Anführungszeichen festgelegt ist. Bei dem Schlüsselwort 'close-quote' wird jene Zeichenkette verwendet, die per Eigenschaft quotes als öffnendes Anführungszeichen festgelegt ist. 'no-open-quote' und 'no-close-quote' führen keine weitere Zeichenkette ein, erhöhen ('no-open-quote') oder erniedrigen ('no-close-quote') aber das Niveau der Verschachtelung von Zitaten um eins.

Zeichenketten werden in doppelten oder einfachen Anführungszeichen notiert. Kommt in der Zeichenkette das verwendete Anführungszeichen selbst vor, so ist es zu maskieren, also '\"' oder '\22' oder "\'" oder "\27". Das Zeichen für eine neue Zeile ist im Verwendungsfalle auch immer zu maskieren, also "\A" oder "\00000a".

Für eine URI, IRI wird die übliche Syntax verwendet, etwa für ein Bild namens 'Bild013.svg' wäre das dann zum Beispiel url('Bild013.svg') oder url("Bild013.svg").

Der Kennzeichner für einen Attributwert wird wie folgt notiert: 'attr(*)', wobei * der Name des Attributes ist, dessen Wert als Zeichenkette verwendet werden soll. Es handelt sich natürlich immer um ein Attribut jenes Elementes, auf welches die Eigenschaft angewendet wird. Beispiel für die Ausgabe des Wertes des Attributes title: attr(title).

Zähler gibt es in zwei Varianten und werden wie folgt notiert 'counter(*)' oder 'counters(*), wobei * für eine Liste von Inhalten steht. Bei 'counter' ist das * entweder der Name eines Zählers (siehe unten) oder der Name, gefolgt von einem Komma und optionalen Leerzeichen, gefolgt von einer Stilinformation (siehe unten). Bei 'counters' ist das * der Name eines Zählers (siehe unten), gefolgt von einem Komma und optionalen Leerzeichen, gefolgt von einer Zeichenkette. Optional kann dann wiederum ein Komma mit optionalen Leerzeichen folgen, gefolgt von einer Stilinformation (siehe unten). 'counter' erzeugt eine einfache Numerierung, während sich 'counters' eignet, um bei verschachtelten Zählern mit selbem Namen eine kompliziertere Numerierung wie 1, 1.1, 1.1.1 etc zu realisieren (siehe Abschnitt über automatische Numerierung).

Die Stilinformation entspricht einem Wert der Eigenschaft list-style-type für Listen, Voreinstellung ist der Wert 'decimal'.

Zählernamen sind eine Zeichenkette zur Identifizierung des Zählers. Zähler selbst werden mit den Eigenschaften counter-reset und counter-increment betrieben. Solch ein Name ist eine einfache Zeichenkette wie zum Beispiel 'num', für jeden Zähler natürlich eine andere.

Beispiel für einen Zähler: counter(num, decimal) oder counters(num, '*', decimal).

Beispiele

Fügt das Bild 'raus_pfeil.svg' vor Verweisen der Klasse 'extern' ein:

a.extern:before {url('raus_pfeil.svg')}

Fügt hinter jedem Element der Klasse 'kapitel' die zentrierte Zeichenkette "--*--" als Blockelement mit Außenabstand ein:

.kapitel:after{content: "--*--";
    display: block;
    margin: 1em;
    text-align: center}

Besonders für Druckausgaben geeignet, eine Methode, um URIs von Verweiszielen, umschlossen mit eckigen Klammern, mit auszudrucken:

a[href]:after {content: '[' attr(href) ']'}

Entsprechend eine Methode, um das Problem zu reduzieren, dass viele Darstellungsprogramme bei (X)HTML die Quellen eines Zitates nicht darstellen, so kann die Quelle mindestens angezeigt werden, wenn :hover angewendet werden kann; analog kann dann für die Stilvorlage zum Drucken der Inhalt wie beim vorherigen Beispiel für URIs auch ausgedruckt werden.

q[cite], blockquote[cite] {position: relative}
q[cite]:after:hover, blockquote[cite]:after:hover 
  {content: 'Quelle:' attr(cite); 
   display: block; 
   position: absolute; 
   top: -2em; 
   border: thin double black; 
   background: #ddd; 
   color: #222}

Anführungszeichen

Mit der Eigenschaft quotes kann Einfluß darauf genommen werden, wie erzeugte Anführungszeichen präsentiert werden.

Der Wert ist entweder eines der Schlüsselwörter 'none' oder 'inherit' oder eine Listen von Zeichenkettenpaaren mit mindestens einem Paar.

Die Eigenschaft wird vererbt und ist anwendbar auf alle Elemente bei visuellen Medien. Der Initialwert ist vom Darstellungsprogramm abhängig (zum Beispiel von der Einstellung der bevorzugten Sprache durch den Nutzer oder der im Dokument angegebenen verwendeten Sprache).

Die Angabe einer beliebig langen Liste von Zeichenkettenpaaren ist möglich, um verschachtelte Zitate mit unterschiedlichen Anführungszeichen ausstatten zu können. Logisch ist das vor allem notwendig, wenn sich das einleitende Anführungszeichen nicht vom beendenden unterscheidet. Von der Lesbarkeit her ist die Struktur solcher Zitate, die selbst Zitate enthalten, aber auch leichter durchschaubar, wenn Zitate in Zitaten andere Anführungszeichen verwenden als das jeweilige Zitat, in welchem sie stehen.

Im Falle von 'none' erzeugen die Werte 'open-quote' und 'close-quote' von content keine Anführungszeichen.

Bei einem Zeichenkettenpaar steht die erste Zeichenkette für das einleitende Anführungszeichen, das zweite für das beendende. Sinnvoller Weise sollten die Paare natürlich paarweise verschiedene Zeichenketten verwenden oder zumindest in der Liste benachbarte Zeichenketten oder Zeichenkettenpaare sollten verschieden sein. 'open-quote' und 'close-quote' von content verwenden dann zum Beispiel diese Zeichenkettenpaare, aber auch Elemente, die gemäß Empfehlung des Formats Anführungszeichen implizieren - was das Darstellungsprogramm wiederum in der eigenen Stilvorlage eben durch die Verwendung von quotes und passenden Selektoren für die betreffenden Elemente umsetzen kann.

Das erste Paar von der Seite des Selektors aus gesehen kennzeichnet oder umschließt das äußerste Zitat. Ein darin eingebettetes Zitat wird durch das gegebenenfalls angegebene zweite Paar gekennzeichnet oder umschlossen. Ein darin eingebettetes Zitat wiederum durch das nächste Paar und so weiter. Wenn die Verschachtelung tiefer reicht als Paare angegeben sind, wird für tiefere Ebenen der Verschachtelung immer das letzte Paar verwendet. Von daher ist es für Texte mit unbekannter Verschachtelungstiefe von Zitaten ratsam, wenn wenigstens das letzte angegebene Paar zwei unterschiedliche Zeichen aufweist.

Beispiel für ein eigenes XML-Format, welches ein Element zitat hat, um ein Zitat zu kennzeichnen:

zitat {quotes: '\201E' '\201C' '\201A' '\2018'  '"' '"' "'" "'" '« ' ' »' '\2039 ' ' \203A' }
zitat:before { content: open-quote }
zitat:after  { content: close-quote }

Automatische Numerierung

Mit den Eigenschaften counter-increment und counter-reset werden Zähler kontrolliert, die dazu verwendet werden können, eine automatische Numerierung von Inhalten umzusetzen. Verwendet werden solche Zähler mit dem Wert 'counter' oder 'counters' der Eigenschaft content.

counter-reset wird verwendet, um einen Zähler auf einen bestimmten Wert zu setzen; Voreinstellung ist der Wert 0. counter-increment wird verwendet, um einen Zähler um einen bestimmten Wert zu ändern; die Voreinstellung ist um den Wert 1.

counter-increment und counter-reset sind nicht vererbbar und anwendbar auf alle Elemente bei allen Medien. Der Initialwert ist jeweils das Schlüsselwort 'none'. Ist bei einem Element allerdings display auf 'none' gesetzt, so kann es weder einen Zähler setzen noch verändern, entsprechend andere Elemente, die nicht angezeigt werden. Hat ein Pseudoelement für content den Wert 'normal' oder 'none', wird es nicht erzeugt, kann demnach also ebenfalls keinen Zähler setzen oder verändern. Ist ein Element lediglich nicht sichtbar, etwa durch Verwendung von visibility 'hidden', so bedeutet dies keine Einschränkung der Verwendbarkeit für die automatische Numerierung. Nicht dargestellte Strukturen tragen also nicht zur Numerierung bei, nicht sichtbare schon.

Der Wert ist jeweils entweder eines der Schlüsselwörter 'none' oder 'inherit' oder eine Liste. Ein Listenpunkt beginnt mit einem Zählernamen, worauf dann optional eine ganze Zahl folgen kann. Wird kein Schlüsselwort verwendet, muß also mindestens ein Zählername angegeben werden, wobei bei der Namenswahl 'none', 'inherit' und 'initial' ausgeschlossen sind (Für 'initial' wird vielleicht später einmal ein besonderes Verhalten festgelegt, daher ist der Wert als Schlüsselwort reserviert).

Bei 'none' wird der Zähler jedenfalls nicht zurückgesetzt beziehungsweise nicht erhöht.

Wird bei der Verwendung einer Liste bei einem Listenpunkt keine Zahl angegeben, gelten die Voreinstellungen, also rücksetzen auf 0 beziehungsweise erhöhen um 1, ansonsten finden die angegebenen Zahlen Anwendung. Die Erhöhung (oder Erniedrigung bei einer negativen Zahl) des Zählers findet jedes Mal statt, wenn der Selektor zutrifft, jeweils in der Reihenfolge des Quelltextes.

Wird der Zähler beim selben Selektor sowohl geändert, als auch per content verwendet, so wird er erst geändert und dann verwendet. Dargestellt wird also immer der neue Wert und nicht der alte. Wird der Zähler beim selben Selektor sowohl zurückgesetzt als auch geändert, so wird erst zurückgesetzt und dann geändert. Wird derselbe Zähler in einer Liste mehrmals notiert, wird er auch mehrmals zurückgesetzt oder geändert, in der Reihenfolge wie angegeben.

Beispiele für einfache Zähler

Beispiel für ein XHTML-Projekt mit Kapiteln und Abschnitten, wobei h1 für den Titel des Dokuments oder Werkes verwendet wird und Kapitel jeweils mit einer Überschrift h2 beginnen, Abschnitte mit h3. Kapitel und Abschnitte sollen automatisch numeriert werden, der Werktitel selbst natürlich nicht.

body {counter-reset: kapitel}  /* Kapitelzähler erzeugen */
h2:before {
    content: counter(kapitel)". " ;   /* Kapitelnummer der Überschrift voranstellen */
    counter-increment: kapitel;  /* Kapitelzähler um 1 erhöhen */
}
h2 {
    counter-reset: abschnitt;      /* Abschnittzähler erzeugen oder auf 0 setzen */
}
h3:before { /* Kapitel- und Abschnittsnummer in der Art '3.5.' der Überschrift voranstellen */
    content: counter(kapitel) "." counter(abschnitt) ". ";
    counter-increment: abschnitt; /* Abschnittzähler um 1 erhöhen */
}

Zu beachten ist, dass die Kaskadierung bei counter-reset Verwendung findet, was an folgendem Beispiel erläutert wird:

p.lemma5 {counter-reset: absatz 5}
p.lemma5 {counter-reset: regel 2}

Dies sorgt dafür, dass nur der Zähler mit Namen 'regel' auf 2 gesetzt wird, nicht aber der Zähler mit Namen 'absatz' auf 5. Um beides zu erreichen, müßte man also formulieren:

p.lemma5 {counter-reset: absatz 5 regel 2}

Zähler bei Verschachtelung

Wichtig ist auch das Verhalten bei Verschachtelung und demselben Zählernamen, sofern ein Nachfahre eines Elementes mit definiertem Zähler den Zähler zurücksetzt. Für dessen Nachfahre wird dann der Zähler mit zurückgesetzten Wert verwendet, während die Vorfahren den alten Zähler mit nicht zurückgesetztem Wert verwenden.

So ist es auch recht problemlos möglich, beliebig tief verschachtelte Listen automatisch zu numerieren:

ol {counter-reset: lp}
li:before { content: counter(lp) ". "; counter-increment: lp }

Steht also insbesondere ein ol in einem li (zum Beispiel mit Zählerstand 5), so erzeugt es damit eine neue Liste, bei der die Numerierung mit 1 beginnt. Die folgenden Geschwister des li (mit Zählerstand 5) hingegen verwenden den alten, nicht zurückgesetzten Zähler, also bekommt das direkt folgende Geschwisterelement li den um 1 erhöhten Zählerstand (also 6).

Weil hier immer derselbe Zählername auftaucht, kann auch 'counters' zur Ausgabe verwendet werden, wenn die Nummern aller vorherigen Verschachtelungsebenen bei jedem dargestellten Zähler auftauchen sollen, etwa so:

ol {counter-reset: lp}
li:before { content: counters(lp, '.') " "; counter-increment: lp }

In der obersten Verschachtelungsbene bekommt man dann Zähler in folgender Art dargestellt: 1, 2, 3, 4 etc.
In der nächsten Verschachtelungsebene für Unterlisten von Listenpunkt 3 dann etwa: 3.1, 3.2, 3.3, 3.4 etc.
In der Unterliste von Listenpunkt 3.4 dann etwa: 3.4.1, 3.4.2, 3.4.3 etc.

Auswahl des Numerierungsstils für Zähler

Optional kann für die Werte 'counter' und 'counters' auch der Numerierungsstil angegeben werden. Wie bereits beschrieben kann dafür optional ein Wert wie für die Eigenschaft list-style-type innerhalb der Klammern der Zählernotation notiert werden.

Das sieht dann etwa wie folgt aus:

ol.zutaten li {content: counter(zutat, upper-latin) ". "}
ol.rezept li {content: counter(rezept, lower-greek) ". "}

Zurück zu Listen | Hoch zu CSS | Vor zu Seitenmedien