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

html twitter-bootstrap-3

Jeroen jacobs May 23 '15 at 20:33

source to share

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
}

Example

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