CSS links annoying issue

Question

Ok, so I've allready styled my links like so:

a:link{ color: red; }
a:visited{ color: red; }
a:hover{ color: blue; }
a:active{ color: red; }

a { text-decoration: none; }

Now I also have a footer section #footer and I want to apply different colors to the all the links inside it like so:

#footer a:link{ color: green; }
#footer a:visited{ color: green; }
#footer a:hover{ color: yellow; }
#footer a:active{ color: green; }

The problem is that I also have a link with a class of .button inside that #footer:

.button { color: cyan; background: gray; border: none; }

And the styling of the links inside the footer overrides the 'color' of my button and thus it becomes green instead of cyan.

I've placed the styling of the footer links at the bottom of my css and it didn't work.

I know I can use '!important' on the button's 'color' but I just wanted to know if there's another way around this. Thanks!

Answer 1

Try this:

#footer a.button:link { color: cyan; background: gray; border: none; }

It will override the other styles since it's more specific. It targets any "unvisited" "a" element with class of button that is inside the element with id "footer".

CSS-tricks is a great resource of CSS and has a nice article about this: http://css-tricks.com/specifics-on-css-specificity/

Answer 2

Id is a stronger selector than a class.

That's why you have to use #footer .button

For instance in the markup like this

<div class="red" id="green">Some text</div>

and with the following css:

#green{color: green}
.red{color:red }

The outcome will be in green, even though class .red declaration comes later in the stylesheet than #green

Id rule can be overriten by !important or inline styles.

Check this on codepen here

Answer 3

Try using the full path for the button:

#footer a.button:link { color: cyan; background: gray; border: none; }

Or you can also preserve both

.button,
#footer a.button:link { color: cyan; background: gray; border: none; }

Answer 4

You're running into an issue with specificity.

The #footer a:link is more specific than the .button rule (103 vs 10), and therefore it overrides it.

Therefore, you need a more specific rule for buttons inside of the footer. This could, for instance, be:

.button, #footer a.button:link { color: cyan; background: gray; border: none; }

See also:

• Specificity Calculator

Answer 5

The specificity isn't high enough. You could prefix .button with #footer to do it.