Help me understand odd CSS behaviour!

Question

Odd CSS behavior. When i set the visited color using CSS(a.nav:hover as below example) then the hover doesn't work once the link is visited by the user. However when i set it with the reference of the parent element(.header a.nav:hover as below) it works. why ?

a.nav:visited{
color:yellow;
}

/*once the link is visited by user this rule not working*/
a.nav:hover{
color:red;
}

/*if we use this rule it works even after the link is visited*/
.header a.nav:hover{
color:red;
}

<div class="header">
<a class="nav" .. >test </a>
</div>

Answer 1

It sounds like a specificity issue. Do you have any other a pseudo-selectors in your CSS? If there's a selector which is more specific than a.nav:hover (such as .header a.nav:hover) then it will override it, regardless of its position in the file.

Answer 2

a.nav:hover,
a.nav:visited:hover{
color:red;
}

or

a.nav:hover{
color:red !important;
}

Should make it work.