CODEWITHSUNDEEP
htmlcss
seanki
seanki

Reputation: 23

Overriding style in CSS?

JSfiddle here http://jsfiddle.net/s3king93/tXuLD/

Trying to style the individual class .home1 to always have the same grey background as a:hover. For some reason the style won't override, even when I use !important. If I take away the a:hover part the background shows up but the text doesn't.

Anybody have any ideas?

<div class="list-1">
            <ul class="list-style-1">
                <li><a class="home1" href="">HOME</a></li>
                <li><a href="">INFLUENCES</a></li>
                <li><a href="">ABOUT ME</a></li>
                <li><a href="">CLASSES</a></li>
                <li><a href="">ANDREWS VIDEO BLOG</a></li>
                <li><a href="">PHOTOGRAPHY</a></li>
            </ul>
        </div>


.list-1 {
padding:none;
float: right;
clear:right;
padding-right: 27px ;

}

.list-style-1 {
padding-top: 26px;
list-style-type: none;
font-family: "Bell Gothic Std Light";
font-size: 20px;


}

 a { 
display: inline-block;
width: 100%;
text-decoration: none;
padding: 1px;
}

a:link {

text-decoration:none;
color: #2A2A2A;

}

 a:visited {
text-decoration:none;
color: #2A2A2A;
}

 a:hover {
text-decoration:none;
color: #69E0F6;
background: #2A2A2A;

}

a:active {

text-decoration:none;
color: #69E0F6;
background: #2A2A2A;
}



.home1 a:link {

text-decoration:none;
color: #69E0F6;
background: #2A2A2A;

}

Upvotes: 1

Views: 204

Answers (3)

jamil
jamil

Reputation: 555

.home1 a:link {

text-decoration:none;
color: #69E0F6;
background: #2A2A2A;

}

home1 is on the <a> tag, try a.home1 or just .home1 alone you can mix in .home1:hover -- .home1:active if you kept your way class="home1" would need to be on the <li> on an ancestor element somewhere as ajp15243 points out.

Upvotes: 0

klewis
klewis

Reputation: 8379

.home1  {
    background: #2a2a2a !important;
    color: #69E0F6 !important;
}

And my fiddle

Upvotes: 0

Paul Roub
Paul Roub

Reputation: 36458

You want:

a.home1 {
  text-decoration:none;
  color: #69E0F6;
  background: #2A2A2A;
}

Upvotes: 5

Related Questions