CSS - Different between .nav-link:visited and .nav-link a:visited

Question

Hello all,

I see the following usage of CSS and I add my understanding in the end of the rule.

.nav-link:visited,  // control any link that has class .nav-link and is visited
.nav-link a:visited // control any a link that is visited and is a child of component with class .nav-link
{
   color: #006699;
}

For example, <a class="nav-link" href="#">Join</a>

It seems that I still have to add the following rule in order to make the link look like color #006699 when first load the page

a {
  color: #006699;
  text-decoration: none;
}

a:hover {
  text-decoration: underline;
}

Please correct me if I am wrong.

thank you

Answer 1

if you apply the nav-link class in a wrap div of a then you have to use .nav-link a:visited

<div class="nav-link"><a href="#">Join</a></div>

if you apply it in a tag then you just use .nav-link:visited

<a class="nav-link" href="#">Join</a>

the second block of your code apply these rules to any a tag.

Answer 2

Your CSS does not define a style for links with the class 'nav-link'

to be more specific you should add the following instead of what you mention:

a.nav-link { text-decoration:none; color:#000fff; }

Also remember when you style hyperlinks and their different states it is important to have the styles in this order:

':link' or just 'a' then
':visited' then
':hover' then
':active' then

Easy way to remember the order -> LoVe HAte