SELFHTML

Pseudoelemente und Pseudoklassen

Informationsseite

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

 nach unten 

Allgemeines zu Pseudoelementen und Pseudoklassen

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

nach obennach unten

CSS 1.0Netscape 4.0MS IE 3.0Opera 5.12Mozilla Firefox 1Konqueror 3.1Safari 1.0 :link, :visited, :focus, :hover, :active (Pseudoklassen für Verweise)

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

Beispiel:

Beispiel-Seite Anzeigebeispiel: So sieht's aus

<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; }
</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 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 Verweise, die den Fokus erhalten, z.B. durch "Durchsteppen" mit der Tabulator-Taste (CSS 2.0)
:hover = für Verweise, während der Anwender mit der Maus darüber fährt (CSS 2.0)
:active = für gerade angeklickte Verweise

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.

:focus und :hover gelten auch für andere Elemente als Verweise. Wenn Sie beispielsweise für h1:focus 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 funktioniert dies jedoch nicht.

nach obennach unten

CSS 1.0Netscape 6.0MS IE 6.0Opera 5.12Mozilla Firefox 1Konqueror 3.1Safari 1.0 :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:

Beispiel-Seite Anzeigebeispiel: So sieht's aus

<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 noch nicht und :first-line sowie :first-letter erst ab Version 6.

nach obennach unten

CSS 2.0Netscape 6.0Opera 7.50Mozilla Firefox 1Konqueror 3.4 :lang (Pseudoklasse für Sprachauszeichnung)

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

Beispiel:

Beispiel-Seite Anzeigebeispiel: So sieht's aus

<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 Seite 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:

Der Internet Explorer 6 interpretiert :lang noch nicht.

nach obennach unten

CSS 2.0Netscape 6.0Opera 7Mozilla Firefox 1Konqueror 3.1Safari 1.0 :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 handeln, aber auch um variable Inhalte.

Beispiel:

Beispiel-Seite Anzeigebeispiel: So sieht's aus

<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>

<p><a href="../pseudoformate.htm#before_after">zurück</a></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.

Beachten Sie:

Diese Angaben werden vom Internet Explorer 6 noch nicht interpretiert, von Opera 5 und 6 teilweise.

nach obennach unten

CSS 2.0Opera 7.50Mozilla Firefox 1Konqueror 3.4 Automatische Anführungszeichen

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

Beispiel:

Beispiel-Seite Anzeigebeispiel: So sieht's aus

<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 nach oben :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 nach oben :before, :after in Verbindung mit content:open-quote bzw. content:close-quote.

Die Seite 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 vom Internet Explorer 6 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.

nach obennach unten

CSS 2.0Opera 5.12Konqueror 3.4 Automatische Nummerierung

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

Beispiel:

Beispiel-Seite Anzeigebeispiel: So sieht's aus

<html><head><title>:before, :after</title>
<style type="text/css">
h1:before {
  content:counter(Ebene01) " ";
  counter-increment:Ebene01;
  counter-reset:Ebene02;
}
h2:before {
  content:counter(Ebene01) "." counter(Ebene02) " ";
  counter-increment:Ebene02;
}
</style>
</head><body>

<h1>&Uuml;berschrift erster Ordnung</h1>
<p>Text</p>
<h2>&Uuml;berschrift zweiter Ordnung</h2>
<p>Text</p>
<h2>&Uuml;berschrift zweiter Ordnung</h2>
<p>Text</p>
<h1>&Uuml;berschrift erster Ordnung</h1>
<p>Text</p>
<h2>&Uuml;berschrift zweiter Ordnung</h2>
<p>Text</p>
<h2>&Uuml;berschrift zweiter Ordnung</h2>
<p>Text</p>
<h2>&Uuml;berschrift zweiter Ordnung</h2>
<p>Text</p>
<h1>&Uuml;berschrift zweiter Ordnung</h1>
<p>Text</p>

</body></html>

Erläuterung:

In der Regel werden Sie für die automatische Nummerierung ein Überschriftenelement wie h1 oder h2 angeben und die Nummerierung vor dessen Text setzen. Dann müssen Sie 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:. Dahinter können im Zusammenhang mit automatischer Nummerierung drei Funktionen folgen, die die Nummerierungszähler steuern. Trennen Sie mehrere Funktionsaufrufe durch Strichpunkte (;).

Mit counter([Name]) fügen Sie den Wert des Zählers mit dem Namen Name an die aktuelle Stelle ein. Beim ersten Vorkommen hat der Zähler den Wert 1. In den runden Klammern notieren Sie Zählernamen. Im obigen Beispiel sind das die Namen Ebene01 und Ebene02. Die Namen können Sie frei vergeben.
Mit counter-increment:[Name] zählen Sie den Zähler mit dem angegebenen Namen um eins hoch. Normalerweise notieren Sie zuerst counter([Name]) und dann counter-increment:[Name], um zuerst den aktuellen Zählerstand einzufügen und dann den Zähler für das nächste Vorkommen des betroffenen Elementtyps hochzuzählen.
Mit counter-reset:[Name] setzen Sie einen Zähler wieder auf seinen Anfangswert (1) zurück. Dies 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 hinter dem Aufruf von counter(Ebene01) als statischer Text 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 bislang weder von Netscape, Mozilla Firefox, Internet Explorer, noch von Safari unterstützt, wohl aber von Opera und Konqueror ab Version 3.4.

 nach oben
weiter Seite Positionierung und Anzeige von Elementen
zurück Seite Tabellenformatierung
 

© 2005 Seite Impressum

href="../../navigation/index.htm" target="_parent" class="navh">Navigationshilfen Teil von Stylesheets (CSS) Teil von CSS-Eigenschaften

© 2005 Seite Impressum