CODEWITHSUNDEEP
htmlcss
Casey Crookston
Casey Crookston

Reputation: 13945

Override CSS for a:link by class

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:

enter image description here

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?

Upvotes: 0

Views: 664

Answers (1)

steliosbl
steliosbl

Reputation: 8921

.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;
}

Upvotes: 3

Related Questions