Override CSS for a:link by class - html

Question

In the existing CSS file, we have:
a:link {
text-decoration: none;
color: #0486d9;
}
a:visited {
text-decoration: none;
color: #0486d9;
}
Which is fine, but I don't want that style in all cases. For example, for this link, I want it always white and underlined:
<a id="someId" class="GridviewSort" href="...">Date</a>
I thought this would do it:
.GridviewSort a:link {
text-decoration: underline;
color: white;
}
.GridviewSort a:visited {
text-decoration: underline;
color: white;
}
But it's not. The original style remains. What am I doing wrong?
EDIT:
Thanks, stybl. For some reason the original blue is still being dominant. But the Underline is working! Here's what's happening:
EDIT 2:
Ok, further up in the same style sheet is this:
a {
color: #0486d9 !important;
}
Which is still forcing the link to be blue. I don't want to change or remove this line because of the impact it might have elsewhere in the site. Is there a way to override this one too?

Answer 1

.GridviewSort a:visited targets <a> tags that are children of elements with the GridviewSort class. What you want is to target <a> tags that have that class.
This should work:
a.GridviewSort:link {
text-decoration: underline;
color: white;
}
a.GridviewSort:visited {
text-decoration: underline;
color: white;
}
Note: if you intend to have the same exact style for both clicked and unclicked links, you can shorten it like so:
a.GridviewSort:link,
a.GridviewSort:visited {
text-decoration: underline;
color: white;
}