Ich habe vor kurzem in diesem Artikel einige Pseudo-Elemente vorgestellt und auch Beispiele für den praktischen Einsatz aufgezeigt. Ein Element habe ich dabei bewusst ausgelassen, da es sich definitiv lohnt, es genauer vorzustellen: die Pseudo-Klasse :target.

Wie der Name schon verrät (target (englisch) = Ziel), wird die Klasse aktiv, wenn das dazugehörige Element aufgerufen oder Ziel einer Aktion ist. Mittels :target können bestimmte Elemente oder Bereiche auf der Webseite angesprochen und formatiert werden.

So lässt sich beispielsweise die Schriftfarbe ändern, wenn das entsprechende Element aufgerufen wird. Die simple Style-Deklaration dafür wäre wie folgt:

#absatz {
color: #fff;
}

#absatz:target {
color: #000;
}

Stellt sich nur die Frage, wie die ID absatz als Ziel aufgerufen werden kann. Vielleicht ist bekannt, dass IDs als Ankerpunkt genutzt werden können. Beispielsweise kann ich mit dem Link

http://www.olivergast.de/gb/#comments

direkt zum Kommentarformular des Gästebuchs springen, ohne das Gästebuch aufrufen und zum Kommentarformular scrollen zu müssen.

Und so können wir im obigen Beispiel durch einen direkten Link auf das Element dessen Schriftfarbe ändern:

<a class="button" href="http://www.einbeispiel.de/seite/#absatz">Schriftfarbe ändern</a>

Klar soweit?

Das Zielelement kann beliebig formatiert werden. Gerade im Zusammenspiel mit transition und keyframe bietet das unzählige Möglichkeiten.

Noch ein Beispiel? Auf Knopfdruck soll der Fluss eines Elements von links nach rechts verschoben werden.

Die Style-Deklaration

#absatz {
float: left;
}

#absatz:target {
float: right;
}

und der HTML-Aufruf

<a class="button" href="#absatz">Float nach rechts</a>

Denkbar sind viele Möglichkeiten das Zielelement zu formatieren. So kann die Sichtbarkeit von Elementen verändert werden

#zielelement:target {
opacity: 0.5;
}

oder das Element gänzlich ausgeblendet werden

#zielelement:target {
display: none;
}

und vieles mehr.

Die Kehrseite der Medaille

Die Idee ist sicher großartig, allerdings gibt es ein Problem: der Ankerpunkt, also das ID-Element, wird immer am oberen Rand des Browser-Fensters angezeigt, wenn der Webseiteninhalt größer als das Browserfenster ist. Klickt ihr bei folgendem Beispiel auf einen Button,

wird das Element an den oberen Rand des Browserfensters verschoben.

Das ist leider sehr unschön; die Beispiele auf der Demo-Seite machen das deutlich. Abhilfe gibt es nach meiner Kenntnis bisher nicht.

Auf der Demo-Seite gibt es weitere Beispiele. Dort findet ihr unter anderem eine einfache Bildergalerie, bei der die Bilder auf Knopfdruck vergrößert werden.