CODEWITHSUNDEEP
css
Anil Namde
Anil Namde

Reputation: 6608

Help me understand odd CSS behaviour!

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>

Upvotes: 1

Views: 57

Answers (2)

Skilldrick
Skilldrick

Reputation: 70819

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.

Upvotes: 2

Jacob Rask
Jacob Rask

Reputation: 24368

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

or 

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

Should make it work.

Upvotes: 0

Related Questions