Question

I have some code that is a simple div with a css stylesheet that has:

#upgrade-message {
   margin: 15px 0px;
   padding: 15px 10px 15px 50px;
   background-repeat: no-repeat;
   background-position: 10px center; 
   color: #00529B; 
   background-color: #BDE5F8;
   background-image: url('../../../../templates/yoo_vanilla/images/typography/box_info.png');
   display: block;
   clear: left;
   float: right;
}

#upgrade-message a:link {
   color: black;
}

The code is (in php but you get the idea):

echo "<div id=\"upgrade-message\">A message: <a href=\"ppay\">Upgrade</a> now!</div>";

The a:link part of my css is not getting applied. Basically I just want to change the “Upgrade” text to black. If I put an inline style it works great.

I can’t see any conflict on my site as I check it with Firebug and the other parts of the css with upgrade-message are applying. I also see the css in firebug but it doesn’t seem to apply. I’ve even tried this fiddle to make sure it was the right syntax.

Can anyone shed any light on why the css with a:link is not applying?

Answer 1

Perhaps you have already visit the link? And so the CSS isn’t applied. Use

#upgrade-message a { }

or for modern browser or with more compatibility:

#upgrade-message a:link,
#upgrade-message a:hover,
#upgrade-message a:visited,
#upgrade-message a:active {
    /* ... */
}