CSS Pseudoclass :active / :focus

[Gunnar Bittersmann]

@@Maetzzen

Nun wäre es toll, wenn dieses Element die css-styles nicht nur bei :hover sondern auch nach dem klicken behält.

Hier ein fiddle dazu.

Warum verstümmelst du Umlaute? Das ist doch überhaupt nicht nötig.

Warum für :focus einen gänzlich anderen Stil als für :hover? Dir ist die Funktion von :focus bewusst? Und die von :active?

Wenn ich die href der <a>-Links mit meinen verschiedenen *.php Seiten verlinke, wird die rote Schrift nicht beibehalten.

Du rufst dann ja auch eine neue Seite auf. Die neue Seite weiß nichts darüber, was du auf der alten Seiten angeclickt (oder anderweitig angewählt!) hast.

Gibt es hierfür eine Lösung?

Ja. Den Menüpunkt der aktuellen Seite im Markup kenntlich machen und dann entsprechend stylen. Und am besten den Menüpunkt der aktuellen Seite nicht verlinken. (Punkt 10) Aber vielleicht doch bei Keyboard-Navigation von Screenreadern vorlesen lassen. (Conundrum)

Das a-Element kann aber bleiben – ohne href-Attribut. (Beispiel) Gestylt wird dann bspw. 'nav a' und 'nav a[href]'. Oder (in heutigen Browsern) 'nav a:not([href])' und 'nav a[href]'. Oder zukünftig per 'nav a:any-link'.

Auf mehreren Seiten wiederkehrende Dinge kann man auch auslagern; auch dann ist die Nicht-Verlinkung der aktuellen Seite machbar.

TL;DR und dortige Links.

LLAP 🖖