Teil 13: Pseudo-Klassen

13 Seiten, meine Güte, mach vlt mal ne pause, schau ob alles Sinn macht, ich warte.

Fertig? Gut. Dann geht’s jetzt um Pseudo-Klassen. Auch hier wieder: Der name ist zig mal gruseliger als das was es ist. Im Endeffekt kann man mit diesen Dingern nämlich einfach nur “Aktions-Selektoren” basteln. Auch das maximal Kryptisch, hier ein Beispiel: Der Rote link von eben war schön und rot, aber wenn man drüber hovern tut passiert nix. Verpasst? Ein Roter link, sehr fancy. Der Code dafür war ja wie folgt:

<style>

/* Klassen-Selektor, sehr fancy */
.roterLink{
    color: red;
}
</style>

<a href="/"> Ein langweiliger Link</a>
<a href="/" class="roterLink"> Ein Roter link, sehr fancy</a>

Wir wollen den einfach weil es lustig ist bei Hover (Maus drüber) Grün statt Rot machen. Mit CSS kein problem, Pseudo-Klassen sei dank:

<style>
/* Klassen-Selektor, sehr fancy */
.roterLink_besser{
    color: red;
}

/* Das :hover ist die Pseudo-Klasse */
.roterLink_besser:hover{
    color: green;
}
</style>

<a href="#"> Ein langweiliger Link</a>
<a href="#" class="roterLink"> Ein Roter link, (nicht) sehr fancy</a>
<a href="#" class="roterLink_besser"> Ein besserer roter link, mit hover, sehr fancy</a>

sieht dann so aus:

Ein langweiliger Link Ein Roter link, (nicht) sehr fancy Ein besserer roter link, mit hover, sehr fancy

Auch das nicht wirklich schwer, oder? Man hängt einfach den Status den man ändern will im Format Klasse : Status.

Ok, das war es jetzt wirklich. Nochmal vielen Dank für alles Interesse und viel Spaß beim basteln.

— Steve