: aktiv - CSS-Tricks | CSS-Almanach 2025

Der :activePseudo-Selektor ändert das Erscheinungsbild eines Links, während er aktiviert wird (angeklickt oder anderweitig aktiviert). Es wird normalerweise nur für den Bruchteil einer Sekunde angezeigt und gibt visuelles Feedback, dass das Element tatsächlich angeklickt wurde. Es wird am häufigsten für Ankerlinks ( ) verwendet.

Hier ist zum Beispiel CSS, mit dem Ankerverknüpfungen im aktiven Zustand um ein Pixel nach unten stoßen (was den Eindruck erweckt, im dreidimensionalen Raum verschoben zu werden):

Siehe den Status "Stift: aktiv" des CSS-Tricks-Teams (@ css-Tricks) auf CodePen.

: Aktiv kann auch auf jedes Element angewendet werden. Wenn Sie im Stift unten auf eine beliebige Stelle auf der Seite klicken, wird die gesamte Seite gelb:

Siehe die Stift-Demo der: aktiven Pseudo-Klasse des CSS-Tricks-Teams (@ css-Tricks) auf CodePen.

Es wird empfohlen, alle „Staaten“ abzudecken, insbesondere für Links. Ein einfacher Weg, dies zu tun, ist "LIEBE HASS" oder

L: Link
O
V: besucht
E.

H: Schwebeflug
A: aktiv
T
E.

Es ist ideal, sie in dieser Reihenfolge auszuführen.

a:link ( /* Essentially means a(href), or that the link actually goes somewhere */ color: blue; ) a:visited ( color: purple; ) a:hover ( color: green; ) a:active ( color: red; )

Wenn Sie andernfalls den zuletzt besuchten Stil aufgelistet haben und dieser Link besucht wurde, wird die Deklaration: active und: hover überschrieben, und der Link ist immer lila, unabhängig davon, ob Sie schweben oder ob der Link aktiv war (nicht ideal).