Change Footer Link Color?

[Ohnoo]

Hi,

I have read several posts and websites to fix this but must be missing something.

I simply want to make the site map link be white instead of the colors set for the rest of my page. I will set the visited and non visited link to both be white since the link appears on every page and may be visited more than once by certain users.

This is the css:

    footer {    
    margin-top: 0px;
    margin-bottom: 0px;
    margin-right: auto;
    margin-left: auto;
    border : 1px solid transparent;
    background : black;
    color : #ffffff;
}

This is the html:

 <span class="right"><a href="sitemap.html">Site Map</a></span>

Tried playing with adding a class to the a link itself as this is the only link in the entire page that will be this way. Not sure what I am missing but how can I change the link colors here without effecting all class right items everywhere else?

Thanks

[ronpat]

The short answer is that the colors are applied in the <a> via the pseudoclasses, but you already know that.

These need to be addressed more specifically.

Give the span tag or these anchors an additional class that is unique to them or use a parent selector that is unique to these anchors, something like one of these:

.uniqueclassname a:link {}
.right a.uniqueclassname:link {}
.right.uniqueclassname a:link {}

(only :link shown for simplicity)

[Ohnoo]

Ah I see, I think I was adding an extra set of brackets. Will give it a shot and see how it goes. Will report back.

Thanks

[Ohnoo]

Not sure where I was originally going with this but I kept changing something with the classes or anchors that was not letting this work.

Finally in the end all is working with the following css and class assigned directly to the link requiring the white color on black background.

.whitelink:link {color: #ffffff; }
.whitelink:visited {color: #ffffff; }
.whitelink:hover {color: #fe0000; }
.whitelink:active {color: #fe0000; }

What I was trying to do the first go around was combine all like so:

.whitelink {
a:link { color: #100bc6; }
a:visited { color: #62006a; }
a:focus { color: #fe0000; }
a:hover { color: #fe0000; }
a:active { color: #000000; }
}

Of course that did not work. Thanks for the help.

[dresden_phoenix]

Are you using SASS?

you don’t nest brackets in CSS. if rules are common to multiple selectors you can declare the rule once but list the selector separated by commas You use compound selectors. barring some other more specific rules in your code you could simply do:

footer a, footer a:visited { color: #fff;}
 footer a:hover, footer a:active { color: #fe0000;}

[Ohnoo]

I knew that but I guess I was just off kilter while having other things on the brain.

It is getting to where having multiple duties at multiple jobs is getting stacked a bit high, I have chores including sales, redecorating, website creation, network maintenance, computer maintenance, building wiring and what ever else comes along. Quite a range but if the boss thinks I can do it I get it. This just touches the surface.

Maybe some day I will be able to concentrate on one or two of these things hopefully so the other things don’t fog the brain.

As for your comma separated I do want to start using those techniques but only when I get caught up and have time to read a full CSS book so I can spot issues easier when combined.

For now I am just happy the project works well. When CSS was not in the picture and RWD was not around things were easier.