How do I make menu links different colors when clicked or unclicked?


I am creating a basic HTML/CSS page just for practice. I am in the early stages. I am building a page about Spider-Man. At the top of the page, I have created a nav bar with hour different options:

About Me Movies Comics Toys

I have learned how to changed the color of a “clicked” link, and I changed it to yellow. Since I have clicked on all of them, they are all yellow. My question: Is there a way to assign different colors to them? For example, what if, after all of them have been clicked, I want the Movies word to be in green and the Comics word to be in purple? Can I do that?

Here is part of my HTML:

  <div class="menu">

    <a href=#AboutMe>About Me</a>

    <a href=#Movies>Movies</a>

    <a href=#Comics>Comics</a>

    <a href=#Toys>Toys</a>


Here is what I have on CSS for this:

a:visited {
color: yellow;

Just like other tags, the anchor a tag can accept class and id attributes to distinguish them from others. Therefore if you want each to have a totally different colour, my best recommendation would be to give each link it’s own id (movies, comics etc), and then target those using movies:visited, comics:visited etc. So it would look something like this:


  <div class="menu">

    <a id="aboutme" href=#AboutMe>About Me</a>

    <a id="movies" href=#Movies>Movies</a>

    <a id="comics" href=#Comics>Comics</a>

    <a id="toys" href=#Toys>Toys</a>



#aboutme:visited {
   color: green;
#movies:visited {
   color: orange;
#comics:visited {
   color: yellow;
#toys:visited {
   color: purple;

See this codepen to see it in action.