Why does a:hover get overriden in CSS?

Question

If I have this CSS:

a:link { color: blue; }
a:hover { color: red; }
#someID a:link { color: black; }

Links under the ID always appears in black on hover. I'm aware that using an ID gives a higher priority, however, I'm not overriding the :hover selector, only the :link selector, so shouldn't the hover display in red?

Answer 1

The :link pseudo class applies to the link even when you are hovering over it. As the style with the id is more specific it overrides the others.

The only reason that the :hover style overrides the :link style at all is that it comes later in the style sheet. If you place them in this order:

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

the :link style is later in the style sheet and overrides the :hover style. The link stays blue when you hover over it.

To make the :hover style work for the black link you have to make it at least as specific as the :link style, and place it after it in the style sheet:

a:link { color: blue; }
a:hover { color: red; }
#someID a:link { color: black; }
#someID a:hover { color: red; }

Answer 2

There's an order issue, as explained in W3Schools:

Note: a:hover MUST come after a:link and a:visited in the CSS definition in order to be effective!!

Note: a:active MUST come after a:hover in the CSS definition in order to be effective!!

http://www.w3schools.com/CSS/css_pseudo_classes.asp