Cant style the foooter hyperlink... arrghhh!

Hi from was sunny now about to rain again but a pleasant 19 degrees C York UK,

I feel my CSS knowledge has made a major step backwards this afternoon and i am embarrassed to admit i just cant work this out but I surrender after two hrs of frustration.

Below is an illustration of the rogue code that I just cant make work (at the bottom right hand side of the footer) the element a just turn orange, what the hell am i doing wrong. To me the following css declaration:
.tandc a:link {
color: #FF8000;
}

says turn the a element orange that has a class of tandc ( Iknow theres a bit above to but thats there just to show the caos).

So if any ones got the patience to spell this one out for me the live page is:

Thanks in advance,
David

This link?

It is orange - until you visit it. Then it becomes visited-link-purple. (If that isn’t a CSS colour name, it should be. )

2 Likes

Yup, add .tandc a:visited to your css if you want it to remain orange

2 Likes

Thank you guys for taking a look at this but… still no joy, yes i made the suggested changes and then some. So my question for anyone with pateience is why is the hyperlink not orange in all 4 states with the code illustrated below:

I think styles ffrom another source are conflicting perhaps?

Sorry - my bad (should have checked the actual css to see what was being applied…)

You need a.tandc:visited not .tandc a:visited

PS. Inspect element is your friend if you’re trying to hunt this down - it’ll show you what’s actually being applied…

1 Like

Yes thank you that worked, yipeee :slight_smile: :slight_smile: :slight_smile:

Maybe i’m getting obsessive this afternoon but for anyone who wants to fuel my neurosis why did this work:

a.tandc:visited {
color: #FF8000;
}

And this did not
.tandc a:visited {
color: #FF8000;
}

Plus do you need to make sure no gaps in:
a.tandc:visited {
color: #FF8000;
}

Grazie mille :wink:

Because these are selecting two different sets of objects.

a.tandc:visited selects a link with a class of tandc (which is what you had in your html)
.tandc a:visited looks for an visited a element inside another container which has a class of tandc

css

a.tandc:visited { color: red; }
.tandc a:visited { color: blue; }

html

<a href="http://www.example.com" class="tandc">This should be red once it's been clicked</a>

<div class="tandc">
   <a href="http:///www.example2.com">This should be blue once it's been clicked</a>
</div>
1 Like

Thank you so much for taking time out to explain that for me :slight_smile:

1 Like

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.