CSS set link color

Question

I need to customize something like this, I want link1 has color orange, link2 & link3 have color white at first, but after clicked the link is orange the rest are white,

their original color is black so I use CSS

.naomi ul li a:link {
  color : #fff !important;
}
.naomi ul li a:hover,  .naomi ul li a:active, {
  color : brown;
 }

The HTML is:

<div class="naomi">
  <ul>
    <li ><a class="link1"></a></li>
     here
    <li ><a class="link2"></a></li>
    <li ><a class="link3"></a></li>
  </ul>
</div>

Please help me with the orange part.

Answer 1

To color a link that has been clicked you use the pseudo class :visited

In your case, as it doesn't apply to all links, you need to set it to the targeted classes.

Note, this custom CSS needs to be loaded after Wordpress's CSS. You also might have to adjust the rules specificity so it matches Wordpress, or as a last resort, use !important

.naomi {
  background-color : gray;  /* added so we can see the white links */
}
.naomi .link1 {
  color : orange;
}
.naomi .link2,
.naomi .link3 {
  color : #fff;
}
.naomi .link2:visited,
.naomi .link3:visited {
  color : orange;
}
.naomi .link1:hover,
.naomi .link2:hover,
.naomi .link3:hover,
.naomi .link1:active,
.naomi .link2:active,
.naomi .link3:active {
  color : brown;
 }

<div class="naomi">
  <ul>
    <li ><a class="link1" href="#1">Link1</a> more text </li>
    <li ><a class="link2" href="#2">Link2</a> more text </li>
    <li ><a class="link3" href="#3">Link3</a> more text </li>
  </ul>
</div>

Answer 2

Use :visited property

a:visited {color:orange}