Question

please consider these styles:

a:link { color: blue }
a:visited { color: red }
a:hover { color: green }
a:active { color: black }
#special:link { color: pink }

And now this markup:

<a href="#">Normal link</a>
<a href="#" id="special">Special link</a>

I expect the “special” link to be pink while keeping the other colors. However, pink replaces the other colors.

Why is this happening? How could I fix it? Thank you.

Answer 1

I believe it has to do with CSS priority order.

Because #special is an ID, it dwarfs any element-level style applied. (This can be proven in Firefox Firebug/Chrome Inspector and how the inherited style sheets are all over-written by the ID’s style).

Though, considering there is no “present style” applied for :active, :visited, etc. It would stand to reason these styles would still be un-affected. Yet, making the following change to your hover seems to kick it back in to gear:

a:hover { color: green !important; }