How to make visited the same colo(u)r as unvisited


If I want visited links to be the same colour as unvisited ie var(–navtext), but both to have text-decoration: none; how would I go about this in CSS?

I also want the text to be coloured var(–linkHoverColor) on hover

I have html:

        <a href="image01.php">&lt; Previous</a>
        <a href="index.php">Home</a>  
        <a href="image03.php">Next &gt;</a>

and CSS

  text-decoration: none!important;

a:hover {
  color: var(--linkHoverColor);

a:visited {
  text-decoration: none 
  color: var(--navText)!important;  

  font-family: Roboto, sans-serif;
  font-weight: 600;
  color: var(--navText);
  padding: 10px;
  display: flex;

but visited links are showing up purple (?browser default).

I have tried to avoid using !important but this kept coming up when I was Googling around this issue.

Thank you.

Did you set the custom property first? If you didn’t, it will “fall through” and use the browser default.

Also, did you realize your a.nav will never select? That will only hit items like this

<a class="nav" href="#">Click me</a>

You need to use nav a. I’ve taken your code, added a different custom property to your visited so it doesn’t look like the other links, and changed that selector (plus the flex won’t work because display:flex needed to be put on the nav element, not the links


Doh! Of course - I think I tried having a nav class in links in an earlier iteration and then left the CSS like that. Thank you.

Aha! That’s got it - thank you.


This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.