CODEWITHSUNDEEP
htmlcss
Brenda Nicole Tan
Brenda Nicole Tan

Reputation: 5604

How do I override my site's link colors with classes?

I am having some trouble overriding my site's default link colors. Tried looking up similar questions but am still hitting a brick wall.

This is what I have defined as the base link colors:

a:link, a:visited, a:hover { color: #0279aa }

And this is my style override for a specific element.

a:link.slideshow-navigate { 
  background : #37ab4f;
  color : #fff;
}

I've defined my link as follows:

<a href="#" class="slideshow-navigate">Link name</a>

However, my link color still shows up as #0279aa instead of #fff. I'd like to avoid using "!important" as far as possible.

Any help will really be appreciated! Thanks in advance.

Upvotes: 0

Views: 117

Answers (3)

Sahil Popli
Sahil Popli

Reputation: 1995

you can do this with 

a:link:not[href^="http"]{

background : #37ab4f;
  color : #fff;
}

dont need to add a class in every link

this will style all link that are internal and avoid external links that starts from http.

Upvotes: -2

Manish Mishra
Manish Mishra

Reputation: 12375

do this:

a.slideshow-navigate
    {
        color:#fff;
    }

Upvotes: 0

Sowmya
Sowmya

Reputation: 26969

That should be like 

a.slideshow-navigate{
    background : #37ab4f;
    color : #fff;
}

DEMO

Upvotes: 4

Related Questions