button should get a diffrent color when clicked on but instead the color of all buttons on that page change

Question

I have 50 buttons on a site and when someone slicked on a button I want the color of that button to change but now the color of all the buttons change.

ALL THE BUTTONS LINK TO THE SAME PAGE

body {
  background-color: #2D3E50
}

h1 {
  font-size: 7vw;
  color: white;
}

h2 {
  font-size: 5vw;
  color: white;
  font-weight: normal;
}

div {
  text-align: center;
  text-align-last: center;
}

a:link {
  background-color: #F19B42;
  padding: 15px 16px;
  align: center;
  text-decoration: none;
  display: inline-block;
  margin: 4px;
  margin-right: 0px;
  font-family: monospace;
  font-size: 15px;
  color: white
}

.a:visited {
  background-color: #5ABD9C;
  color: white;
}

.ab:visited {
  background-color: #5ABD9C;
  color: white;
}

.ac:visited {
  background-color: #5ABD9C;
  color: white;
}

.ad:visited {
  background-color: #5ABD9C;
  color: white;
}

.ae:visited {
  background-color: #5ABD9C;
  color: white;
}

.af:visited {
  background-color: #5ABD9C;
  color: white;
}

.ag:visited {
  background-color: #5ABD9C;
  color: white;
}

.d:visited {
  background-color: #5ABD9C;
  color: white;
}

.da:visited {
  background-color: #5ABD9C;
  color: white;
}

.db:visited {
  background-color: #5ABD9C;
  color: white;
}

.dc:visited {
  background-color: #5ABD9C;
  color: white;
}

.dd:visited {
  background-color: #5ABD9C;
  color: white;
}

.de:visited {
  background-color: #5ABD9C;
  color: white;
}

.df:visited {
  background-color: #5ABD9C;
  color: white;
}

.dg:visited {
  background-color: #5ABD9C;
  color: white;
}

.e:visited {
  background-color: #5ABD9C;
  color: white;
}

.ea:visited {
  background-color: #5ABD9C;
  color: white;
}

.eb:visited {
  background-color: #5ABD9C;
  color: white;
}

.ec:visited {
  background-color: #5ABD9C;
  color: white;
}

.ed:visited {
  background-color: #5ABD9C;
  color: white;
}

.ee:visited {
  background-color: #5ABD9C;
  color: white;
}

.ef:visited {
  background-color: #5ABD9C;
  color: white;
}

.eg:visited {
  background-color: #5ABD9C;
  color: white;
}

.c:visited {
  background-color: #5ABD9C;
  color: white;
}

.ca:visited {
  background-color: #5ABD9C;
  color: white;
}

.cb:visited {
  background-color: #5ABD9C;
  color: white;
}

.cc:visited {
  background-color: #5ABD9C;
  color: white;
}

.cd:visited {
  background-color: #5ABD9C;
  color: white;
}

.ce:visited {
  background-color: #5ABD9C;
  color: white;
}

.cf:visited {
  background-color: #5ABD9C;
  color: white;
}

.cg:visited {
  background-color: #5ABD9C;
  color: white;
}

.b:visited {
  background-color: #5ABD9C;
  color: white;
}

.ba:visited {
  background-color: #5ABD9C;
  color: white;
}

.bb:visited {
  background-color: #5ABD9C;
  color: white;
}

.bc:visited {
  background-color: #5ABD9C;
  color: white;
}

.bd:visited {
  background-color: #5ABD9C;
  color: white;
}

.be:visited {
  background-color: #5ABD9C;
  color: white;
}

.bf:visited {
  background-color: #5ABD9C;
  color: white;
}

.bg:visited {
  background-color: #5ABD9C;
  color: white;
}

.f:visited {
  background-color: #5ABD9C;
  color: white;
}

.fa:visited {
  background-color: #5ABD9C;
  color: white;
}

.fb:visited {
  background-color: #5ABD9C;
  color: white;
}

.fc:visited {
  background-color: #5ABD9C;
  color: white;
}

.fd:visited {
  background-color: #5ABD9C;
  color: white;
}

.fe:visited {
  background-color: #5ABD9C;
  color: white;
}

.ff:visited {
  background-color: #5ABD9C;
  color: white;
}

.fg:visited {
  background-color: #5ABD9C;
  color: white;
}

.fh:visited {
  background-color: #5ABD9C;
  color: white;
}

.fi:visited {
  background-color: #5ABD9C;
  color: white;
}

.fj:visited {
  background-color: #5ABD9C;
  color: white;
}

.fk:visited {
  background-color: #5ABD9C;
  color: white;
}

.fl:visited {
  background-color: #5ABD9C;
  color: white;
}

.fm:visited {
  background-color: #5ABD9C;
  color: white;
}

body {
  font-family: monospace;
}

<html>

<head>
  <title>Dolf 50!</title>
  <link rel="stylesheet" href="Opdrachten.css">
</head>

<body>

  <h1 class="title">Dolf, golf, wolf.</h1>
  <h2> Hieronder zie je alle woorden. Klik op het woord als je de foto hebt gemaakt waarvan je denkt dat deze het woord goed uitbeeld.</h2>

  <a class="fe" href="./opdrachtclick.html">Fohnen...</a>
  <a class="ae" href="./opdrachtclick.html">Snowboarden</a>
  <a class="af" href="./opdrachtclick.html">Programmeren</a> <a class="da" href="./opdrachtclick.html">ING</a> <a class="ag" href="./opdrachtclick.html">Arduino/pi/dialog flow etc.</a> <a class="e" href="./opdrachtclick.html">Leren en inspireren</a>
  <a
    class="f" href="./opdrachtclick.html">Klussen / Doe het zelven</a>
    <a class="b" href="./opdrachtclick.html">Nieuwe gadgets</a> <a class="ba" href="./opdrachtclick.html">Famillie</a> <a class="ea" href="./opdrachtclick.html">Non-alcohol</a> <a class="fh" href="./opdrachtclick.html">Dushi</a> <a class="fa" href="./opdrachtclick.html">Musea en culturele uitjes</a>

    <a class="ab" href="./opdrachtclick.html">Zeilen</a> <a class="d" href="./opdrachtclick.html">Innovaties</a> <a class="ac" href="./opdrachtclick.html">Reizen</a> <a class="cd" href="./opdrachtclick.html">Goede vader</a>
    <a class="ad" href="./opdrachtclick.html">Fotografie</a>
    <a class="db" href="./opdrachtclick.html">Vakantie</a>
    <a class="bb" href="./opdrachtclick.html">Jeugd van tegenwoordig</a> <a class="c" href="./opdrachtclick.html">V90</a> <a class="ec" href="./opdrachtclick.html">Rotterdam</a> <a class="eb" href="./opdrachtclick.html">Marathon NY rennnen</a>
    <a class="fb" href="./opdrachtclick.html">Elektrisch fietsen </a>
    <a class="fi" href="./opdrachtclick.html">Kannikaler </a>
    <a class="bc" href="./opdrachtclick.html">Gezin </a> <a class="ca" href="./opdrachtclick.html">Oudercommissie ATC</a> <a class="dc" href="./opdrachtclick.html">Meisjesvoetbal</a> <a class="ad" href="./opdrachtclick.html">Curacao</a>
    <a class="fc" href="./opdrachtclick.html">Mearlant Lyceum</a>
    <a class="fj" href="./opdrachtclick.html">Blote voeten</a> <a class="fk" href="./opdrachtclick.html">Kruidvat</a>
    <a class="bd" href="./opdrachtclick.html">Emilie & Quirijn</a> <a class="cb" href="./opdrachtclick.html">Luceline</a> <a class="dd" href="./opdrachtclick.html">Jansje</a> <a class="ed" href="./opdrachtclick.html">Netflix</a> <a class="fd" href="./opdrachtclick.html">Amazon</a>
    <a class="be" href="./opdrachtclick.html">Aanbiedingen kopen</a> <a class="cc" href="./opdrachtclick.html">Grapjes maken</a> <a class="de" href="./opdrachtclick.html">Thee</a> <a class="ef" href="./opdrachtclick.html">Lekker snoepen</a> <a class="a"
      href="./opdrachtclick.html">Golfen</a>
    <a class="fl" href="./opdrachtclick.html">Op pad gaan</a>
    <a class="bf" href="./opdrachtclick.html">Snurken</a> <a class="df" href="./opdrachtclick.html">Fijne echtgenoot</a> <a class="eg" href="./opdrachtclick.html">Detje, Jan, Ma & Pa, Charlotte</a> <a class="fg" href="./opdrachtclick.html">Op Agile wijze zaken aanpakken</a>

    <a class="bg" href="./opdrachtclick.html">Slordig</a> <a class="ce" href="./opdrachtclick.html">Washington Post</a> <a class="dg" href="./opdrachtclick.html">Curacaose Pastechi</a> <a class="fm" href="./opdrachtclick.html">Lief</a>

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

</body>


</html>

sorry I will change it ;) I couldn't place the question otherwise because then I'd have to much code and not enough description. — Emilie van Eps, Feb 18 '19 at 20:45
Added css I used the classes to make each button special but unfortunately this doesn't work. — Emilie van Eps, Feb 18 '19 at 20:58
I'm pretty sure `:visited` was removed for some styles. See [Why are certain CSS properties not applied to a:visited?](https://stackoverflow.com/a/10320628/215552) — Heretic Monkey, Feb 18 '19 at 21:11

Kamil Kiełczewski · Accepted Answer · 2019-02-19T03:42:24.723

2

Try

a:focus {
  background: yellow;
}

a {
  padding: 10px;
  background: #aaa;
  border-radius: 5px;
  margin: 5px; 
  display: block;
}

a:focus {
  background: yellow;
}

<a  class="fe" href="#A" >Fohnen...</a>
<a class="ae" href="#B" >Snowboarden</a>
<a class="af" href="#C" >Programmeren</a> <a 
class="da" href="#D" >ING</a>

If you want to change color after click in persisten way you can use

a:visited {
  background: red;
}

a {
  padding: 10px;
  background: #aaa;
  border-radius: 5px;
  margin: 5px; 
  display: block;
}

a:visited {
  background: red;
}

<a  class="fe" href="#Z" >Fohnen...</a>
<a class="ae" href="#X" >Snowboarden</a>
<a class="af" href="#Y" >Programmeren</a> <a 
class="da" href="#W" >ING</a>

edited Feb 19 '19 at 03:42

answered Feb 18 '19 at 20:46

Kamil Kiełczewski

85,173
29
368
345

@EmilievanEps - which snippet doesn't work (and how it shoud work)? – Kamil Kiełczewski Feb 18 '19 at 21:02
Did the second thing but because all the links are a: it made them al red. Then I gave all the links diffrent classes and said. – Emilie van Eps Feb 18 '19 at 21:02
.a:visited { background-color: #5ABD9C; color: white; } .ab:visited { background-color: #5ABD9C; color: white; } .ac:visited { background-color: #5ABD9C; color: white; } – Emilie van Eps Feb 18 '19 at 21:03
But if i visit one link all the links get that color instead only that link. – Emilie van Eps Feb 18 '19 at 21:04
@EmilievanEps in my snippet I use different href for each link - this makes difference – Kamil Kiełczewski Feb 18 '19 at 21:05
but they should all go to the same page or i can make 50 duplicates – Emilie van Eps Feb 18 '19 at 21:14
in that case It looks like this is impossible task as far as I know (using only html and css) – Kamil Kiełczewski Feb 18 '19 at 21:21
Can I use basic javascript for this? – Emilie van Eps Feb 18 '19 at 21:26
@EmilievanEps yes of course - on button click event you can use [localstorage](https://developer.mozilla.org/pl/docs/Web/API/Window/localStorage) and button number (in his parent child list) to save info that it was clicked - and during page loading read that info from localsotrage – Kamil Kiełczewski Feb 18 '19 at 21:34
Duplicated all the pages and now it works! Thanks for the help – Emilie van Eps Feb 18 '19 at 22:02

score 1 · Answer 2 · answered Feb 18 '19 at 21:04

1

All the links are the same. Try changing the hrefs to different locations and it should behave correctly. The :visited selector works against the href visited in the browser's URL history, not the name.

answered Feb 18 '19 at 21:04

Kevin Brown

12,602
34
95
155

Those details really help when framing your question. :) Make sure to include those first next time! – Kevin Brown Feb 18 '19 at 21:47
@EmilievanEps I think you'll need to employ a javascript solution. I don't think there's a good CSS solution b/c you're limited to the browser API. – Kevin Brown Feb 18 '19 at 21:50
You may be able to "hack" it by using a hash at the end of each link...it shouldn't affect the other page, but would "trick" the browser to think they're different links. – Kevin Brown Feb 18 '19 at 21:52

score 0 · Answer 3 · answered Feb 18 '19 at 22:14

a:link {
  color: #FF0000;
  text-decoration: none;
}

a:visited {
   color: #00FF00;
}
a:hover {
  color: #FF00FF;
  text-decoration: underline;
}
a:active {
  color: #0000FF;
}

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Lets mess around</title>
 
</head>
<body>
  <p><a href="#">Awesome</a></p>
</body>
</html>

CSS Links have Four different states

`:link`,`:visited`,`:hover`, `:active` 

a:link -Styles links that have not been visited.
a:visited -styles a link that has been visited but mouse pointer isn't there.
a:hover-styles a link when a mouse pointer is on the element.
a:active-styles a link that has been clicked and mouse is on top of it.

score 0 · Answer 4 · answered Feb 19 '19 at 13:46

These links all go to the same place, so the default "visited" link color will be applied to all buttons.

Instead of classes, change your links to use the hashtag.

For example, change:

<a  class="fe" href="./opdrachtclick.html" >Fohnen...</a>

To:

<a  class="fe" href="./opdrachtclick.html#fe" >Fohnen...</a>

Do this for all the links so they are unique and the "visited" pseudoselctor will work as intended.

Then for the CSS, you can just do:

a:visited {
    background-color: #5ABD9C;
    color: white;
}

button should get a diffrent color when clicked on but instead the color of all buttons on that page change

4 Answers4