SELFHTML: Stylesheets / CSS-Eigenschaften / Pseudoelemente und Pseudoklassen
Author: Redaktion SELFHTML, selfhtml81@selfhtml.org
Description: Welche CSS-Eigenschaften es gibt, um Bestandteile eines HTML-Textes zu formatieren, für die es keine HTML-Elemente gibt.
Keywords: SELFHTML, CSS, Stylesheets, Cascading Stylesheets, HTML, CSS-Eigenschaften, Pseudoelemente, Pseudoklassen, Pseudoformate, Linkformatierung, Verweise, erstes Zeichen, erste Zeile, Nummerierung, automatische Nummerierung, a:link, a:visited, a:focus, a:hover, a:active, :link, :visited, :focus, :hover, :active, :first-line, :first-letter, :lang, :before, :after, content:, quotes:, open-quote, close-quote, generierter Inhalt
Date: 2005-10-28T21:26:03+02:00

| # Pseudoelemente und Pseudoklassen
| Allgemeines zu Pseudoelementen und Pseudoklassen :link, :visited, :focus, :hover, :active (Pseudoklassen für Verweise und andere Elemente) :first-child, :first-line, :first-letter (Pseudoklasse und Pseudoelemente für Absätze) :lang (Pseudoklasse für Sprachauszeichnung) :before, :after (Pseudoelemente für automatisch generierten Inhalt) Automatische Anführungszeichen Automatische Nummerierung

## Allgemeines zu Pseudoelementen und Pseudoklassen

Was Pseudoelemente und Pseudoklassen sind, wird im Abschnitt Pseudoelemente und Pseudoklassen definieren beschrieben.

## :link, :visited, :focus, :hover, :active (Pseudoklassen für Verweise und andere Elemente)

Sie können das Erscheinungsbild von Verweisen zu noch nicht besuchten Seiten, zu bereits besuchten Seiten und zu Elementen, die per Tastatur selektiert, gerade mit der Maus überfahren oder angeklickt werden, bestimmen.

### Beispiel:

Anzeigebeispiel: So sieht's aus

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
    <html><head><title>:link, :visited, :focus, :hover, :active</title>
    <style type="text/css">
    a:link { font-weight:bold; color:blue; text-decoration:none; }
    a:visited { font-weight:bold; color:silver; text-decoration:none; }
    a:focus { font-weight:bold; color:red; text-decoration:underline; }
    a:hover { font-weight:bold; color:green; text-decoration:none; }
    a:active { font-weight:bold; color:lime; text-decoration:underline; }

    h1:focus { background-color:red; }
    h1:hover { background-color:silver; }
    h1:active { background-color:green; }
    </style>
    </head><body>

    <h1>Bekannte Suchdienste</h1>
    <p>
    <a href="http://de.yahoo.com/">Yahoo! (Verzeichnis)</a><br>
    <a href="http://www.google.de/">Google (Suchmaschine)</a><br>
    <a href="http://web.de/">Web.de (Verzeichnis)</a><br>
    <a href="http://www.multimeta.de/">Multimeta (Meta-Suchmaschine)</a>
    </p>

    </body></html>

### Erläuterung:

Pseudoklassen werden zentral in einem `style`-Bereich notiert. Die hier beschriebenen Pseudoklassen gelten teilweise nur für das `a`-Element in HTML, daher wird vor dem Doppelpunkt das `a` notiert. In den Formatdefinitionen für die einzelnen Pseudoklassen können Sie beliebige, geeignete CSS-Eigenschaften zuweisen. Die folgenden Pseudoklassen bedeuten:

`:link` = für Verweise zu noch nicht besuchten Seiten
`:visited` = für Verweise zu bereits besuchten Seiten
`:focus` = für Elemente, die den Fokus erhalten, z.B. durch "Durchsteppen" mit der Tabulator-Taste (CSS 2.0)
`:hover` = für Elemente, während der Anwender mit der Maus darüber fährt (CSS 2.0)
`:active` = für gerade angeklickte Elemente

### Beachten Sie:

Um die meist gewünschte Darstellung dieser Pseudoklassen zu erreichen, müssen Sie bei der Notierung die Reihenfolge des Beispiels einhalten.

Netscape 4.x und der Internet Explorer 3.0 interpretieren noch nicht alle Angaben. Insbesondere reagiert Netscape 4.x noch nicht auf die Pseudoklasse `a:hover`. Der Internet Explorer interpretiert `:focus` als `:active`. Opera ignoriert zunächst `:focus` und wendet die für diesen Zustand definierten Eigenschaften erst bei nachfolgendem `:hover` zusätzlich an.

Die Pseudoklassen `:focus`, `:hover` und `:active` gelten auch für andere Elemente als Verweise. Wenn Sie beispielsweise für `h1:active` CSS-Eigenschaften definieren und dann mit der Maus auf eine `h1`-Überschrift klicken, nimmt diese, solange die Maustaste gedrückt wird die definierten Eigenschaften an. Im Internet Explorer bis einschließlich Version 6 funktioniert keine dieser allgemeingültigen Pseudoklassen und in Version 7 lediglich `:hover`.

## :first-child, :first-line, :first-letter (Pseudoklasse und Pseudoelemente für Absätze)

Sie können für Absätze mit längerem Fließtext für die erste Zeile des Absatzes ein separates Erscheinungsbild erzwingen. Ferner können Sie für das erste Zeichen der ersten Zeile ein separates Erscheinungsbild erzwingen. Und schließlich können Sie sogar bestimmen, dass ein erstes Kindelement eines Elements ein besonderes Aussehen erhält. Dies sind typografische Effekte, die von Druckschriften her bekannt sind.

### Beispiel:

Anzeigebeispiel: So sieht's aus

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
    <html><head><title>:first-line, :first-letter, :first-child</title>
    <style type="text/css">
    p:first-line { font-weight:bold }
    p:first-letter { font-size:300%; color:red }
    div { background-color:#E0E0E0 }
    div p:first-child { background-color:#C0C0C0; }

    </style>
    </head><body>

    <p>Man kann nur Br&uuml;cken schlagen zwischen Ufern die man
    auseinanderh&auml;lt. Denn wo es keine Gr&auml;ben gibt, da gibt es
    auch keine Unterschiede, und wo es keine Unterschiede gibt, da ist kein
    Leben.</p>
    <div>
    <p>Und die Moral von der Geschicht:</p>
    <p>Traue Philosophen nicht!</p>
    </div>
    </body></html>

### Erläuterung:

Pseudoelemente und Pseudoklassen werden zentral in einem `style`-Bereich notiert. Die hier beschriebenen Pseudoelemente und Pseudoklassen sind für typische Absatz- oder Überschriftenelemente in HTML gedacht. In den Deklarationen können Sie beliebige, geeignete CSS-Eigenschaften zuweisen. Die Pseudoelemente und Pseudoklassen bedeuten:

`:first-child` (Pseudoklasse) = das Element, das das erste Kindelement eines anderen Elements ist erhält die CSS-Eigenschaften
`:first-line` (Pseudoelement) = die erste Textzeile des Elements erhält die CSS-Eigenschaften
`:first-letter` (Pseudoelement) = das erste Zeichen des Textes erhält die CSS-Eigenschaften

### Beachten Sie:

Der Internet Explorer interpretiert `:first-child` erst ab Version 7 und `:first-line` sowie `:first-letter` erst ab Version 6.

## :lang (Pseudoklasse für Sprachauszeichnung)

Sie können Elemente, deren Sprache mit Hilfe des lang-Universalattributs definiert wurde, speziell formatieren.

### Beispiel:

Anzeigebeispiel: So sieht's aus

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
    <html lang="de"><head><title>:lang</title>
    <style type="text/css">
    :lang(en) { background-color:#ddf; }
    :lang(fr) { background-color:#dfd; }
    </style>
    </head><body>

    <p>Viele <span lang="en">Websites</span> enthalten fremdsprachige Wörter.</p>
    <p lang="fr">C'est la vie!</p>

    </body></html>

### Erläuterung:

Pseudoklassen werden zentral in einem `style`-Bereich notiert. Die hier beschriebene Pseudoklasse bedeutet:

`:lang(en)` = Elemente, deren Sprachinhalt als `en` (englisch) ausgezeichnet wurde
`:lang(fr)` = Elemente, deren Sprachinhalt als `fr` (französisch) ausgezeichnet wurde

Nach `:lang` ist innerhalb runder Klammern ein Sprachenkürzel zu notieren. Der Selektor `:lang(de)` trifft auch auf Elemente zu, die mit `lang="de-AT"` oder `lang="de-CH"` ausgezeichnet wurden, da nur der Beginn des Attributwertes geprüft wird.

### Beachten Sie:

Diese Angaben werden auch vom Internet Explorer 7 noch nicht interpretiert.

## :before, :after (Pseudoelemente für automatisch generierten Inhalt)

Sie können bestimmen, dass vor oder nach einem Element automatisch Inhalt eingefügt wird. Es kann sich um statischen Text, beliebige Ressourcen (meist Grafiken), aber auch um variable Inhalte handeln.

### Beispiel:

Anzeigebeispiel: So sieht's aus

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
    <html><head><title>:before, :after</title>
    <style type="text/css">
    h1:before { content:url(../../../src/dokx.gif)" "; }
    h2:before { content:"\2022"; }
    h2:hover:after { content:" #"attr(id); color:#888; font-size:70%; font-style:italic; }
    *[title]:after { content:" ("attr(title)")"; color:#080; }
    </style>
    </head><body>

    <h1>Thema</h1>

    <h2 id="einleitung">Einleitung</h2>

    <p title="Erläuterung...">Text mit <code>title</code>-Attribut</p>

    </body></html>

### Erläuterung:

Pseudoelemente werden zentral in einem `style`-Bereich notiert. Die hier beschriebenen Pseudoelemente bedeuten:

`:before` = Inhalt, der vor dem notierten Inhalt des Elements eingefügt werden soll
`:after` = Inhalt, der nach dem notierten Inhalt des Elements eingefügt werden soll

Innerhalb der geschweiften Klammern bestimmen Sie dann mit `content:`, was vor bzw. nach dem in HTML notierten Elementinhalt automatisch eingefügt werden soll.

Im obigen Beispiel wird für das `h1`-Element bestimmt, dass vor dem Elementinhalt eine Grafik und ein Leerzeichen eingebunden werden.
Vor dem `h2`-Element wird das Unicode-Zeichen `U+2022` (Bullet-Grafik) eingefügt.
Für Überschriften zweiten Grades wird ferner bestimmt, dass beim Überfahren mit der Maus nach dem Element ein Gatterzeichen und der Inhalt des `id`-Attributs eingefügt werden.
Allen Elementen, die ein `title`-Attribut aufweisen, wird der Inhalt des Attributs mittels `attr([Attributname])` von runden Klammern umschlossen angefügt.

Statischer Text hinter `content:` muss in Anführungszeichen stehen. Im obigen Beispiel können Sie auch sehen, dass es möglich ist, Angaben zu kombinieren. So bedeutet `content:" #"attr(id)`, dass vor dem Attributwert noch ein statisches Leer- und ein Gatterzeichen eingefügt werden und `content:url(../../../src/prev.gif)" ";`, dass der Grafik ein Leerzeichen folgt.

CSS 2.1 ergänzt ferner folgende Werte, die erst in CSS3 Bedeutung erlangen werden:

`content:none` = das Pseudoelement wird nicht generiert
`content:normal` = wie `none`

### Beachten Sie:

Generierter Inhalt wird auch vom Internet Explorer 7 noch nicht interpretiert, von Opera 5 und 6 nur teilweise.

## Automatische Anführungszeichen

Eine erweiterte Syntax der Pseudoelemente :before, :after erlaubt auch die automatische Einfügung von Anführungszeichen, z.B. für Zitate.

### Beispiel:

Anzeigebeispiel: So sieht's aus

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
    <html><head><title>quotes:</title>
    <style type="text/css">
    :lang(de)    { quotes:"\201E" "\201C" "\201A" "\2018"; }
    :lang(de-DE) { quotes:"\00BB" "\00AB" "\203A" "\2039"; }
    :lang(de-CH) { quotes:"\00AB" "\00BB" "\2039" "\203A"; }
    :lang(en)    { quotes:"\201C" "\201D" "\2018" "\2019"; }
    :lang(fr)    { quotes:"\00AB\00A0" "\00A0\00BB" "\2039\00A0" "\00A0\203A"; }

    q:before { content:open-quote; color:#a00; }
    q:after { content:close-quote; color:#a00; }
    q q:before { content:open-quote; color:#0a0; }
    q q:after { content:close-quote; color:#0a0; }

    q { font-size:40px; }
    q q { color:#888; }
    code { font-weight:bold; }
    </style>
    </head><body>

    <p><q lang="de">Sie sagte <q>es geht mir gut</q></q> deutsch</p>
    <p><q lang="de-de">Sie sagte <q>es geht mir gut</q></q> deutsch (franz&ouml;sische Variante)</p>
    <p><q lang="de-ch">Sie sagte <q>es geht mir gut</q></q> deutsch (Schweiz)</p>
    <p><q lang="en">She said <q>I am fine</q></q> englisch</p>
    <p><q lang="fr">Elle dit <q>Je vais bien</q></q> franz&ouml;sisch</p>

    </body></html>

### Erläuterung:

Mittels der Eigenschaft `quotes:` ist es möglich, die gewünschte Form von Anführungszeichen zu definieren. Als Selektor dient die Pseudoklasse :lang, um der jeweiligen Sprache angepasste Anführungszeichen zu gewährleisten. Die Auszeichnung mittels `de-DE` dient im Beispiel nur der Unterscheidung der französischen Variante.

Nach `quotes:` folgen vier in Hochkommata eingefasste Zeichenreferenzen. Der erste Wert steht für das öffnende Zeichen, der zweite für das schließende. Die beiden folgenden stehen analog dazu für verschachtelte Zitate, wenn also innerhalb eines Zitats nochmals zitiert wird. Eingefügt werden die Anführungszeichen schließlich aufgrund der Eigenschaften :before, :after in Verbindung mit `content:open-quote` bzw. `content:close-quote`.

Die Zeichen für Interpunktion wurden in hexadezimaler Form mit vorangestelltem Backslash notiert.

#### Deutsche Anführungszeichen

Zeichen | Hexadezimal
--- | ---
„ | `\201E`
“ | `\201C`
‚ | `\201A`
‘ | `\2018`

#### Deutsche Anführungszeichen (französische Variante)

Zeichen | Hexadezimal
--- | ---
» | `\00BB`
« | `\00AB`
› | `\203A`
‹ | `\2039`

#### Französische Anführungszeichen, gelten ebenso für die gesamte Schweiz

Zeichen | Hexadezimal
--- | ---
« | `\00AB`
» | `\00BB`
‹ | `\2039`
› | `\203A`

Der Abstand zwischen den Anführungszeichen und deren Inhalt findet nur in Frankreich Anwendung und wurde mittels `\00A0` (entspricht in HTML `&nbsp;`) umgesetzt, um einen unerwünschten Zeilenumbruch zu vermeiden.

#### Englische Anführungszeichen

Zeichen | Hexadezimal
--- | ---
“ | `\201C`
” | `\201D`
‘ | `\2018`
’ | `\2019`

### Beachten Sie:

Diese Angaben werden auch vom Internet Explorer 7 noch nicht interpretiert. Mozilla Firefox vor Version 1.5 ignoriert die Verschachtelungstiefe und stellt das gesamte Beispiel mit den ersten beiden definierten Zitatzeichen dar. Dies gilt auch für Opera-Versionen vor 7.50, die darüber hinaus nicht alle Arten von Anführungszeichen unterstützen. Safari fügt in allen Versionen lediglich verschachtelte Standard-Anführungszeichen ein.

## Automatische Nummerierung

Eine erweiterte Syntax der Pseudoelemente :before, :after erlaubt auch die automatische Nummerierung von Elementen, z.B. für Kapitelüberschriften.

### Beispiel:

Anzeigebeispiel: So sieht's aus

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
    <html><head>
    <title>counter</title>
    <style type="text/css">
    body {
    counter-reset: Ebene01;
    }
    h1:before {
    content: counter(Ebene01) " ";
    counter-increment: Ebene01;
    }
    h1 {
    counter-reset: Ebene02;
    }
    h2:before {
    content: counter(Ebene01) "." counter(Ebene02) " ";
    counter-increment: Ebene02;
    }
    </style>
    </head><body>

    <h1>Überschrift erster Ordnung</h1>
    <p>Text</p>
    <h2>Überschrift zweiter Ordnung</h2>
    <p>Text</p>
    <h2>Überschrift zweiter Ordnung</h2>
    <p>Text</p>
    <h1>Überschrift erster Ordnung</h1>
    <p>Text</p>
    <h2>Überschrift zweiter Ordnung</h2>
    <p>Text</p>
    <h2>Überschrift zweiter Ordnung</h2>
    <p>Text</p>
    <h2>Überschrift zweiter Ordnung</h2>
    <p>Text</p>
    <h1>Überschrift erster Ordnung</h1>
    <p>Text</p>

    </body></html>

### Erläuterung:

In der Regel werden Sie für die automatische Nummerierung Überschriftenelemente wie `h1` oder `h2` angeben und die Nummerierung vor dessen Text setzen. Dann müssen Sie zur Anzeige der Nummerierung im `style`-Bereich Selektoren wie `h1:before` oder `h2:before` notieren. In den geschweiften Klammern folgt dann, wie bei `:before` und `:after` üblich, die Eigenschaft `content:` gefolgt von `counter([Name])`, um den Wert des Zählers mit dem Namen `Name` an die aktuelle Stelle einzufügen.

Mit `counter-increment:[Name]` zählen Sie den Zähler mit dem angegebenen Namen um eins hoch. Sie können auch eine positive oder negative ganze Zahl angeben, mit der gezählt werden soll. So wird mit `counter-increment:[Name] -2` um zwei heruntergezählt.
Mit `counter-reset:[Name]` setzen Sie einen Zähler auf einen Anfangswert von 1. Auch hierbei können Sie eine positive oder negative ganze Zahl anfügen. Damit setzen Sie den Zähler auf diese Zahl als Anfangswert.
Das Zurücksetzen des Zählers ist vor allem wichtig, wenn Sie mit Kapitel-Unterkapitel-Nummerierung arbeiten, wie im obigen Beispiel. Dort wird beim Vorkommen eines neuen `h1`-Elements der Zähler für `h2`-Elemente wieder auf 1 gesetzt.

Neben den Funktionen für die Zählerkontrolle kann auch statischer Text notiert werden. Im obigen Beispiel wird als statischer Text ein Leerzeichen und zwischen `counter(Ebene01)` und `counter(Ebene02)` jeweils ein Punkt notiert. So entsteht im Beispiel durch die Verwaltung der beiden Zähler für Überschriften erster und zweiter Ordnung ein Nummerierungsschema wie 1, 1.1, 1.2, 2, 2.1, 2.2, 2.3, 3 usw.

### Beachten Sie:

Die automatische Nummerierung wird vom Internet Explorer in keiner Version unterstützt.

| Positionierung und Anzeige von Elementen
| Tabellenformatierung

© 2007 Impressum