CSS: Pseudoklassen und Pseudoelemente

[mitaki]

Dieser Artikel ist als Fortsetzung zu den Selektorenbeispielen zu verstehen.

Pseudoklassen und Pseudoelemente

Was sind Pseudoelemente und -klassen?

Als Pseudoklassen bezeichnet man Elemente, die über bestimmte Merkmale verfügen. Das kann z.B. ein Element sein, dass das erste Kind eines Elternelements ist.

Pseudoelemente dagegen sind bestimmte Bereiche, die nicht von der Auszeichnungssprache erfasst, aber dennoch mit Stilangaben versehen werden können, z.B. die erste Textzeile in einem Element.

Nach den Regeln von CSS 2.1 beginnen Pseudoelemente und -klassen mit einem Doppelpunkt, z.B. :active.
Um Pseudoelemente besser von Pseudoklassen unterscheiden zu k�nnen sieht CSS 3 vor, dass Pseudoelemente mit zwei Doppelpunkten markiert werden (z.B. ::after). Das wird bereits von einigen Browsern erkannt.

:first-child - Erstes Kindelement (Pseudoklasse)

Die Pseudoklasse :first-child selektiert das Element, das das erste Kind seines Elternelements ist.

Beispiel (Stilangabe):

Code:

p:first-child {
 font-size: 1.5em;
}

Beispiel (HTML):

HTML-Code:

<div id="nachrichten">
<p>Dieses p-Element ist das erste Kind des div-Elements und erh�lt daher eine Schriftgröße von 1,5em.</p>
<p>Dieses p-Element ist das zweite Kind und wird daher nicht speziell formatiert. Ebenso alle folgenden Elementie innerhalb des div-Elements.</p>
</div>

:first-child ist identisch zur Kombination *:first-child.

:first-line - Erste Textzeile (Pseudoelement)

Wusstet ihr schon, dass Text innerhalb von Blockelementen intern ebenfalls als Element betrachtet wird? Es handelt sich dabei um so genannte anonyme Boxen.

Dieses Pseudoelement stellt die erste Zeile in einem Element dar. Diese Zeile endet entweder durch den automatischen Fließtextumbruch oder durch ein br-Element (bzw. „\A“ bei generiertem Inhalt).

Beispiel (Stilangabe):

Code:

p:first-line {
 font-style: italic;
}

Beispiel (HTML):

HTML-Code:

<p>Diese Zeile wird in graphischen Browsern kursiv dargestellt.<br />
Diese und alle folgenden Zeilen werden unformatiert dagestellt.</p>

:first-line ist identisch zur Kombination *:first-line.

:first-letter - Erster Buchstabe (Pseudoelement)

Mit diesem Pseudoelement wird der erste Buchstabe der ersten Textzeile in einem Element formatiert. Laut Spezifikation wird auch bestimmte vor- oder nachfolgende Punktuation mitformatiert, wenn diese bestimmten Unicode-Klassen zugehörig sind.

Beispiel (Stilangabe):

Code:

p:first-letter {
 font-size: 3em;
 float: left;
}

Beispiel (HTML):

HTML-Code:

<p>Der erste Buchstabe (das D) wird in dreifacher Schriftgröße dargestellt.<br />
Zudem ist er mit float links positioniert, damit der restliche Text daran vorbeifließt. Das erzeugt optisch einen schöneren Effekt.</p>

:first-letter ist identisch zur Kombination *:first-letter.

:lang() - Elemente mit bestimmter Sprache (Pseudoklasse)

Es ist möglich, für Elemente, die zu einer bestimmten Sprache gehören, spezielle Formatierungen anzugeben.

Diese Pseudoklasse erwartet innerhalb der Klammern eine gültige Länderkennung, z.B. de, de-AT, de-DE, en, en-US etc.

Beispiel (Stilangabe):

Code:

acronym:lang(de) {
 background-color: voilet;
 color: white;
}

Beispiel (HTML):

HTML-Code:

<p lang="de">Das Akronym <acronym lang="en">HTML</acronym> wird nicht formatiert.<br />
Warum das Akronym <acronym>BKA</acronym> formatiert wird erkläre ich genauer.</p>

Wird einem Element eine Sprache zugeordnet, vererbt sich diese Angabe auch auf die Kindelemente. Daher ist es möglich, dass das Akronym „BKA“ formatiert wird, obwohl es über keine spezifische Sprachkennung verfügt.

Hinweis:
Möchte man nur Elemente mit dem Sprachattribut formatieren eignet sich der Attributselektor!

Achtung: Mit welchem Attribut die Sprache zugewiesen wird hängt von der Auszeichnungssprache ab!
In HTML gilt das lang-Attribut, in XHTML das xml:lang-Attribut.

In HTML-kompatiblem XHTML werden daher beide Attribute gesetzt, da in als HTML geparstem XHTML das lang-Attribut zählt und in als XML geparstem XHTML das xml:lang-Attribut.

:link - Unbesuchter Verweis (Pseudoklasse)

Mit dieser Pseudoklasse werden alle Verweise angesprochen, deren Ziel vom Benutzer noch nicht besucht werden.

Beispiel (Stilangabe):

Code:

a:link {
 color: #00f;
 background-color: #fff;
}

Angenommen, der Benutzer hat die Seite http://www.example.org/ noch nicht besucht.

Beispiel (HTML):

HTML-Code:

<p>Der folgende Verweis wird mit blauer Schrift formatiert, weil die Seite, auf die er zeigt noch nicht besucht wurde: <a href="http://www.example.org/">Example</a>.</p>

:link ist identisch zur Kombination a:link.

:visited - Besuchter Verweis (Pseudoklasse)

Diese Pseudoklasse ist das Gegenstück zu :link.

Beispiel (Stilangabe):

Code:

a:link {
 color: #f00;
 background-color: #fff;
}

Angenommen, der Benutzer hat die Seite http://www.example.org/ jetzt besucht.

Beispiel (HTML):

HTML-Code:

<p>Der folgende Verweis wird mit roter Schrift formatiert, weil die Seite, auf die er zeigt vom Benutzer bereits besucht wurde: <a href="http://www.example.org/">Example</a>.</p>

Hinweis: Durch spezifische Einstellungen (Cache, Optionen zum Datenschutz) kann der Status „besucht“ nach variabler Zeit auf „unbesucht“ zurückfallen.

:visited ist identisch zur Kombination a:visited.

:hover - Mit einem Zeigegerät überfahrene Elemente (Pseudoklasse)

Durch bestimmte Hardware erscheint auf dem Bildschirm ein Zeigelement (meist der Mauszeiger). Befindet sich dieses Zeigeelement über einem Element erhält dieses die Pseudoklasse :hover.

Beispiel (Stilangabe):

Code:

a:hover {
 text-decoration: none;
}

Beispiel (HTML):

HTML-Code:

<p>Verweise werden üblicherweise uterstrichen dargestellt. Um die Benutzerinteraktion zu demonstrieren verliert in diesem Beispiel der folgende Verweis diese Formatierung, wenn er mit einem Zeiger überfahren wird: <a href="http://www.example.org/">Example</a>.</p>

Hinweis: Der Internet Explorer 6 (ein veralteter Browser) erkennt :hover nur bei Ankern mit dem href-Attribut. Alle Nachfolger kennen :hover bei allen Elementen.

:hover ist identisch zur Kombination *:hover.

:active - Aktivierte Elemente (Pseudoklasse)

Bestimmte Formatierungen können auf Elemente angewendet werden, wenn diese aktiviert werden. Aktiviert ist ein Element beispielsweise nach dem Klick, aber vor dem wieder loslassen der Maustaste.

Beispiel (Stilangabe):

Code:

p:active {
 font-size: 1.5em;
}

Beispiel (HTML):

HTML-Code:

<p>Klickt man auf dieses Element, bzw. den beinhalteten Text, wächst dieser um ein Drittel.<br />
Er schrumpft aber wieder auf Normalgröße, wenn man die Maustaste wieder los lässt.

:active ist identisch zur Kombination *:active.

:focus - Elemente, die eine Eingabe erwarten (Pseudoklasse)

Elemente erhalten die Pseudoklasse :focus, wenn sie eine Benutzereingabe erwarten. Das können z.B. Eingabefelder sein, in denen der Cursor blinkt. Oder auch Verweise, die zwar geklickt, aber nicht besucht wurden (meistens erkennbar durch eine gepunktete outline-Formatierung), dann wäre die Benutzereingabe etwa das Betätigen der Eingabetaste.

Beispiel (Stilangabe):

Code:

input:focus {
 border: 1px solid red;
}

Beispiel (HTML):

HTML-Code:

<p>Das <label for="beispiel">Eingabefeld</label> erhält einen roten Rahmen, wenn eine Texteingabe möglich ist: <input type="text" id="beispiel">.</p>

:focus ist identisch zur Kombination *:focus.

Hinweis: Der internet Explorer hat Schwierigkeiten mit den Pseudoklassen :active und :focus.

---

Eigentlich solte der Text mehr enthalten, aber meine echte Arbeit hat mich leider aufgehalten, tut mir Leid. Werde mein Konzept wohl etwas umstellen müssen.

[Tessio]

Woot.
Endlich kann ich nach einem deiner Texte mal sagen : "Jo, das habe ich auch gewusst. " o.o
Dennoch sehr schön erklärt. Wunderbarer Artikel.