Pseudoklassen

Klassen werden in HTML benutzt, um mehrere Elemente in Gruppen zusammenzufassen, für welche die gleichen CSS-Regeln gelten sollen. Klassen werden vom Webseitenentwickler bei Bedarf definiert.

Auch Pseudoklassen fassen mehrere Elemente in Gruppen zusammen. Allerdings werden Pseudoklassen vom Browser automatisch aufgrund spezieller Eigenschaften der betroffenen Elemente definiert. Der Webseiten-Entwickler kann die Pseudoklassen benutzen, um für die betroffenen Elemente gemeinsame CSS-Regeln zu definieren.

Pseudoklassen können nicht in HTML definiert werden. Sie werden in CSS benutzt, um die Menge der durch einen Selektor ausgewählter Elemente weiter einzuschränken.

Man unterscheidet bei Pseudoklassen zwischen zwei Arten:

• Strukturbasierte Pseudoklassen: hierbei werden Elemente zu Pseudoklassen zusammengefasst, welche in der HTML-Struktur eine gleichartige Position einnehmen, z.B. alle Listenelemente, die an erster Stelle einer sortierten Liste stehen.
• Zustandsbasierte Pseudoklassen: hierbei werden Elemente zu Pseudoklassen zusammengefasst, welche sich im selben Zustand befinden, z.B. welche vom Leser gerade angeklickt werden.

Strukturbasierte Pseudoklassen beschreiben Elemente, welche in der HTML-Struktur eine gleichartige Position einnehmen, z.B. alle Listenelemente, die an erster Stelle einer sortierten Liste stehen.

In der folgenden Tabelle sind Beispiele für strukturbasierte Pseudoklassen zusammengefasst:

Pseudoklasse	Beispiel	Bedeutung
:empty	p:empty	Wählt alle p-Elemente aus, welche keine Inhalte haben.
:first-child	li:first-child	Wählt das erste Kindelement (li) einer Liste aus.
:last-child	li:last-child	Wählt das letzte Kindelement (li) einer Liste aus
:nth-child(n)	li:nth-child(2)	Wählt das zweite Kindelement (li) einer Liste aus
:not(... selector ..)	div :not(p)	Wählt alle Elemente aus, die in einem div-Element stehen und nicht p-Elemente sind

Mehr Pseudoklassen hier: Pseudoklassen.

Hyperlinks können in einem HTML-Dokument unterschiedliche Zustände haben:

• Link-spezifische Zustände:

  nicht besucht

  der Benutzer hat noch nicht auf den Link geklickt

  besucht

  der Benutzer hat bereits auf den Link geklickt

• Allgemeine Zustände:

  Aktiv

  der Benutzer klickt einen Link (ein Element) gerade an

  in der Schwebe

  der Benutzer fährt mit der Maus über den Link (das Element), ohne ihn anzuklicken

  fokusiert

  der Link (das Element) hat den Fokus (der Benutzer ist über die Tabulator-Taste auf den Link gekommen, ihn jedoch nicht geklickt)

Die allgemeinen Zustände gelten auch für alle anderen HTML-Elemente.

Auf Basis der Zustände von Elementen können auch Pseudoklassen benutzt werden:

Zustand	Pseudoklasse
nicht besucht	:link
besucht	:visited
aktiv	:active
in der Schwebe	:hover
fokusiert	:focus