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

[wake689]

Hi,

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:

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

and CSS

a{
  text-decoration: none!important;
}

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

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

a.nav{
  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.

[DaveMaxwell]

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

[wake689]

@DaveMaxwell

Also, did you realize your a.nav will never select?

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.

[wake689]

@DaveMaxwell

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

Aha! That’s got it - thank you.