Interaktions- Pseudoklassen

Mit Pseudo-Klassen in CSS beschreibst du bestimmte Zustände eines Elements. Du hängst sie an einen Selektor an – sie beginnen immer mit einem Doppelpunkt :.

1selektor:pseudo-klasse {
2    eigenschaft: wert;
3}

:hover

Wird aktiv, wenn der Mauszeiger über einem Element liegt.

1 button {
2        background-color: rgb(195, 195, 195);
3        border: none;
4        padding: 10px;
5        border-radius: 10px;
6    }
7
8button:hover {
9        background-color: rgb(255, 104, 104);;
10    }

1<button>fahre über mich</button>

:active

:active beschreibt den Moment, während ein Element gerade aktiviert wird. Bei einer Maus bedeutet das: Die Maustaste ist gedrückt, aber noch nicht losgelassen.

1button:active {
2    transform: scale(0.95);
3}
4    

1<button>klick mich</button>

:focus

Was macht :focus?

• Es erkennt, welches Element gerade ausgewählt ist.
• Es ermöglicht, dieses Element optisch hervorzuheben.
• Es bleibt aktiv, bis ein anderes Element den Fokus erhält.

1input:focus {
2    border: 2px solid red;
3}

1<input type="text" placeholder="Name" /><br>
2<input type="text" placeholder="E-Mail" />

:visited

:visited markiert Links, die der Benutzer bereits besucht hat.

Was passiert ?

• Benutzer hat noch nie auf den Link geklickt → :visited trifft nicht zu.
• Benutzer hat die URL bereits besucht → :visited trifft zu und der Link wird lila.

1a:link {
2  color: blue;
3}
4
5a:visited {
6  color: purple;
7}

1<a href="/css/pseudoKlassen#link">Link</a>