Can't change color of link inside div

Question

I am using Bootstrap3 for a small site and I need to change the color of the link in one of my divs.

However, for some reason, the boot link colors are always applied instead of my custom ones.

CSS

.social a,
.social a:hover,
.social a:focus {
    color: #fefefe;
}

HTML:

<div class="social">
    <a href="#"><i class="fa fa-linkedin"></i></a>
</div>

I also tried this:

.social > a,
.social > a:hover,
.social > a:focus {
    color: #fefefe;
}

But it doesn't matter.

+3

Jeroen jacobs May 23 '15 at 20:33

3 answers

Sun · Answer 1 · 2015-05-23T22:06:13+0000

#fefefe is white. Perhaps you have white content on a white background. It should work.

body {
    background-color: darkgrey;
}

.social a,
.social a:hover,
.social a:focus {
    color: #fefefe; // white
}

Rudi · Answer 2 · 2015-05-23T20:36:54+0000

Try adding .social a:link

to the list

ET-CS · Answer 3 · 2015-05-23T20:40:33+0000

add !important

to your style:

color: #fefefe!important;

or better, make sure your styles are loaded AFTER bootstrap:

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
<link rel="stylesheet" href="/css/mystyle.css">

EDIT:

If tags <a>

are what needs to be styled, you can apply your color to :link

and :visited

too:

.social a,
.social a:link,
.social a:visited,
.social a:hover,
.social a:focus {
    color: #fefefe;
}