Question

I realize that if I’m styling a link in CSS, using a parent element with a class name, i.e.:

div.class a { ... }

The hover state of the link is also inheriting this stylesheet, but only if I prescribed a specific class.

JSFiddle

How to get around this with no duplicating of :hover stylesheets?

Answer 1

The selector div.div a is more specific than the selector a:hover, so it will take precedence.

If you make the hover selector more specific, it will be used for the last div also. For example:

html body a:hover {color:#d00;}