Emmab21
Emmab21

Reputation: 1

class a:link styling not working

I'm trying to style my links within a div which I've given the class .whatnextnav. The hover styling is working but not the link, it's still inheriting the color: #3CB6CE even thought Firebug says it's not.

Can anyone see a problem with the below?

.whatnextnav a:link, a:active, a:visited
  {
  color: #008566;
  text-decoration: none;
  }

.whatnextnav a:hover
  {
  color: #008566;
  text-decoration: underline;
  }

Upvotes: 0

Views: 2246

Answers (2)

Sebsemillia
Sebsemillia

Reputation: 9486

Try changing it to:

.whatnextnav a, .whatnextnav a:active, .whatnextnav a:visited
 {
  color: #008566;
text-decoration: none;
}

.whatnextnav a:hover
 {
color: #008566;
text-decoration: underline;
}

Upvotes: 1

Kevin Bowersox
Kevin Bowersox

Reputation: 94499

When multiple selectors share a single style, the full selector must be used for each selector. Make the class prefix each selector:

.whatnextnav a:link, .whatnextnav a:active, .whatnextnav a:visited
{
  color: #008566;
  text-decoration: none;
}

JS Fiddle: http://jsfiddle.net/9Kqv8/

Upvotes: 2

Related Questions