Wie kann ich per span verschiedene Sachen festlegen?: Wie kann ich per span verschiedene Sachen festlegen?

Hey ich will folgendes machen:
ich gehe auf einen link und die farbe der schrift ändert sich!
Gehe ich nun auf einen anderen link, geht die farbe beim 1. link auf die standartfarbe zurück und der 2. link ändert sich ABER in eine andere farbe als der erste!

Müsstre irgendwie SO aussehen
a:focus span { text-decoration:none; color:#d70031; font-weight:bold; }
a:focus span { text-decoration:none; color:#FFFFFF; font-weight:bold; }

nur leider kann ich hier kein class attribut mehr verwenden was so aussehen würde:
.lol a:focus span { text-decoration:none; color:#d70031; font-weight:bold; }

.rofl a:focus span { text-decoration:none; color:#FFFFFF; font-weight:bold; }

die scheint nicht zu klappen!

Wenn es geht OHEN JavaScript! THX

  1. Müsstre irgendwie SO aussehen
    a:focus span { text-decoration:none; color:#d70031; font-weight:bold; }
    a:focus span { text-decoration:none; color:#FFFFFF; font-weight:bold; }

    FAST richtig.

    <span> ist überflüssig

    a:focus.rot   {color:#f00}
    a:focus.gruen {color:#0f0}

    <a href='..' class=rot>Link 1</a>
    <a href='..' class=gruen>Link 2</a>

    Lieben Gruß, Kalle