Pseudoklassen

Pseudoklassen sind Erweiterungen für Selektoren. Sie werden direkt hinter dem Selektor angegeben. Die Namen von Pseudoklassen sind festgelegt und beginnen immer mit einem Doppelpunkt :. Pseudoklassen dienen dazu, einen Regelblock auf ein Element nur dann anzuwenden, wenn eine bestimmte Eigenschaft (dabei ist nicht die CSS-Eigenschaft gemeint) gegeben ist.

Hover-Effekt

Das bekannteste und beliebteste Beispiel für Pseudoklassen ist der Hover-Effekt. Stellen Sie sich vor, Sie haben ein div-Element mit roter Hintergrundfarbe und sobald Sie Ihren Mauszeiger innerhalb des div-Elements haben, soll die Hintergrundfarbe geändert werden. Eine solche Funktionalität ist in „reinem“ CSS und somit ohne aktive Skriptsprachen wie JavaScript möglich. Der Hover-Effekt kann in CSS mittels der Pseudoklasse :hover angesprochen werden. Typische Beispiele für den Hover-Effekt sind ausklappbare Menüs und die Hervorhebung von Tabellenzeilen. Die Pseudoklasse :hover sollte jedoch mit Vorsicht verwendet werden, da auf Geräten mit Touchscreen bzw. Geräten ohne Maus kein Hover-Effekt zur Verfügung steht.

Ein weiterer ähnlicher Effekt wie :hover können wir mit :active erreichen. :active tritt ein, wenn die Maus bzw. der Cursor sich auf einem Element befindet und die Maustaste gedrückt gehalten wird. Man spricht davon, dass das Element aktiv ist (daher auch der Name der Pseudoklasse). Im unteren Beispiel mit dem div-Element wird also die Hintergrundfarbe auf hellgrün geändert, sobald sich Ihr Cursor innerhalb des Elements befindet und Sie die Maustaste gedrückt halten.

div
{
	background-color: red;
	width: 200px;
	height: 200px;
}
			
div:hover
{
	background-color: blue;
}

div:active
{
	background-color: lime;
}

Fokusierung

Ein paar HTML-Elemente (z. B. input, select und textarea) können den sogenannten Tastaturfokus erhalten. Bei Elementen, die den Tastaturfokus erhalten können, wird beim „Durchschalten“ mittels Tab angehalten. Natürlich kann der Tastaturfokus auch manuell über das Klicken in ein anderes Element (z. B. Textfeld) mittels Maus oder Touchscreen gesetzt werden. Für die Fokussierung durch den Browser gibt es die Pseudoklasse :focus. Dadurch ist es z. B. möglich, das aktuell gewählte Textfeld zu markieren (siehe Beispiel).

body
{
	line-height: 1.8em;
}

input
{
	border: 1px solid red;
}

input:focus
{
	border: 1px solid blue;
	border-radius: 5px;
}

Links

Neben den Pseudoklassen :hover, :active und :focus gibt es für Links zudem noch die Pseudoklassen :link (für nicht besuchte Links) und :visited (für besuchte Links). Mit Hilfe dieser Pseudoklassen ist es nun endlich möglich, das Standardverhalten von Browsern in Bezug auf die Darstellung von Links zu ändern. Dabei ist auf die Reihenfolge der Notation zu achten: :link, :visited, :focus, :hover, :active. Natürlich ist es auch möglich, eine oder mehrere der Pseudoklassen wegzulassen. Um Links zu formatieren, kommen hauptsächlich die CSS-Eigenschaften color und text-decoration zum Zuge.

a:link
{
	color: red;
}

a:visited
{
	color: orange;
}

a:focus
{
	color: lime;
}

a:hover
{
	color: blue;
}

a:active
{
	color: black;
}

Übrigens: In Navigationsleisten möchte man oft Links immer gleich anzeigen, egal ob diese bereits besucht wurden, noch nicht besucht wurden oder fokussiert sind. Dies kann z. B. mittels folgendem simplen CSS-Regelblock erfolgen:

a
{
    color: red;
}

Elemente

Einige Pseudoklassen sind in der Lage, bestimmte Elemente zu selektieren (z. B. das erste oder letzte Element). Eine Liste dieser sogenannten strukturellen Pseudoklassen finden Sie in folgender Tabelle:

p:first-child	Selektiert das erste Element, sofern es sich um ein p-Element handelt.
p:last-child	Selektiert das letzte Element, sofern es sich um ein p-Element handelt.
p:nth-child	Selektiert das n-te Element, sofern es sich um ein p-Element handelt.
p:nth-last-child	Selektiert das n-te Element, sofern es sich um ein p-Element handelt (Zählung beginnt von unten).
p:first-of-type	Selektiert das erste p-Element.
p:last-of-type	Selektiert das letzte p-Element.
p:nth-of-type	Selektiert das n-te p-Element.
p:nth-last-of-type	Selektiert das n-te p-Element (Zählung beginnt von unten).

Die Selektierung eines n-ten Elements kann über verschiedene Art und Weisen erfolgen. Hierfür muss immer hinter dem Namen der Pseudoklasse ein rundes Klammernpaar notiert werden. Für den Wert innerhalb der Klammern gibt es nun verschiedene Möglichkeiten: Wird eine einzelne Zahl angegeben, so wird ein einzelnes Element angesprochen. Bei der angegebenen Zahl handelt es sich um die sogenannte Platznummer. Das erste Element ist die Nummer 1, das zweite die Nummer 2 usw.. Die Angabe einer Zahl, gefolgt von dem Buchstaben n, führt dazu, dass jedes n-te Element selektiert wird, d. h. die Angabe 2n selektiert jedes 2te Element. Diese Angabe kann noch um ein Pluszeichen + gefolgt von einer weiteren Zahl bei Bedarf erweitert werden. Diese zweite Zahl ist als Offset anzusehen, d. h. eine Angabe wie 2n+3 selektiert jedes 2te Element ab dem dritten Element. Da es oft vorkommt, dass man jedes zweite Element selektieren möchte, wurden in CSS die Schlüsselwörter odd und even eingeführt. Die Angabe odd entspricht 2n+1 und even entspricht der Angbae 2n.

Im Beispiel unten könnten die Pseudoklassen :first-child durch :first-of-type, :last-child durch :last-of-type usw. ersetzt werden. Dies ist jedoch nur möglich, da innerhalb des Elternelements (in diesem Fall das body-Element) nur p-Elemente vorhanden sind. Wäre das erste Element nun z. B. ein Bild, so würde die Regel p:first-child nicht mehr in Kraft treten. Würden wir diese jedoch durch p:first-of-type ersetzen, dann würde der Regelblock wieder eintreten.

p:first-child
{
	text-indent: 10px;
}

p:nth-child(2n+5)
{
	color: red;
}

p:nth-child(3)
{
	color: blue;
}

p:last-child
{
	padding-top: 15px;
	border-top: 1px solid black;
}

Formulare

Für Formulare gibt es noch weitere Pseudoklassen, mit welchen es möglich ist, Formularfelder je nach deren Werten bzw. deren Status zu selektieren. Die verfügbaren Pseudoklassen sind in der untenstehenden Tabelle aufgelistet.

:checked	Selektiert Checkboxen und Auswahlgruppen (Radio-Buttons), welche ausgewählt sind.
:disabled	Selektiert deaktivierte Felder.
:enabled	Selektiert aktivierte Felder.
:in-range	Selektiert Felder, bei welchen der Wert innerhalb des Gültigkeitbereichs liegt.
:out-of-range	Selektiert Felder, bei welchen der Wert außerhalb des Gültigkeitbereichs liegt.
:invalid	Selektiert Felder, deren Eingabe ungültig ist.
:valid	Selektiert Felder, deren Eingabe gültig ist.
:required	Selektiert benötigte Felder.
:optional	Selektiert optionale Felder.
:read-only	Selektiert Felder, welche nur gelesen werden können.
:read-write	Selektiert Felder, welche gelesen und geschrieben werden können.

Vorname: <input /><br />
Nachname: <input required="required" /><br />
Betreff: <input /><br />
E-Mail: <input required="required" /><br />
Zahl: <input type="number" min="0" max="9" />

body
{
	line-height: 1.8em;
}

input:optional
{
	background-color: #EEEEEE;
}

input:invalid
{
	border: 3px dotted red;
}

input:out-of-range
{
	color: red;
}