CODEWITHSUNDEEP
csshyperlinkhoverinheritance
Nikita Gavrilov
Nikita Gavrilov

Reputation: 547

CSS a:hover is strangely inheriting styles

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?

Upvotes: 2

Views: 1247

Answers (2)

Guffa
Guffa

Reputation: 700322

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;}

Upvotes: 4

DanielB
DanielB

Reputation: 20230

You can use !important for your hover style.

a:hover {color:#d00 !important;}

Upvotes: 4

Related Questions