inline css link color being inherited [SOLVED]

[ptocco]

I need to make some links white so they stand out against a dark semitransparent background. However, no matter what I do, the link color is being inherited by almost every link on the page. I added this to the main stylesheet and it gave me white links:

.whitelinks a, a:link, a:visited, a:hover, a:active {
color:white;
}

I applied the class to various elements in the footer, each with the same effect: white links everywhere. So then I tried creating a mini style sheet within the footer block div:

<style>

a, a:link, a:visited, a:hover, a:active {
color:white
</style>

That didn’t work so I gave the class a name and applied it to the element, which still didn’t work:

<style>

#wlinks a, a:link, a:visited, a:hover, a:active {
color:white
</style>

I would next like to create a compound inline style, where all the rules are combined into one inline rule, in this format:

style=”color:blue;margin-left:30px;”

however I don’t know how to string together the link properties this way since they each have colons. e.g. a:link, a:visited, etc.

Surely this issue must have come up somewhere. Can anybody offer a tip?

In case this code gets stripped out, I’ve posted to codepen:

http://codepen.io/ptocco/pen/BKqZYq

Thanks!

[Senff]

When you have this:

.whitelinks a, a:link, a:visited, a:hover, a:active {
color:white;
}

It’s expected that all links on the page become white with this code. Do you only want the white links if they are in a specific element (e.g. with class “whitelinks”)? Without seeing your page it’s hard to tell, but you might just want something like this, which may be what you meant to do:

.whitelinks a:link, 
.whitelinks a:visited, 
.whitelinks a:hover, 
.whitelinks a:active {
color:white;
}

[ptocco]

Senff, you hit the nail on the head. Many thanks my friend.

[Author]

Posts