CSS a:hover is strangely inheriting styles

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.

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

i wonder why it doesn't work when you don't even override again the `:hover` class. strange — Bob, Aug 31 '12 at 07:33
it's not strange at all :) - it's called "selector specificity": http://coding.smashingmagazine.com/2007/07/27/css-specificity-things-you-should-know/ — Fabrizio Calderan, Aug 31 '12 at 07:43

score 4 · Answer 1 · edited May 30 '13 at 11:28

4

You can use !important for your hover style.

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

edited May 30 '13 at 11:28

Matias Vad

answered Aug 31 '12 at 07:30

DanielB

I know it but it also not so good decision for me. 'Cause I need to make the styles of the links to be editable with CSS editor which I need to create further (like Firebug but its will be built in the admin panel). And it will be dificult to detect if there is a !importnan in the specific element or not – Nikita Gavrilov Aug 31 '12 at 07:39
Well, you didn't mentioned this requirement in your question. You should then use Guffa's solution. – DanielB Aug 31 '12 at 07:52
`!important` is a last resort and should only be used when appropriate. Also see: https://stackoverflow.com/questions/8360190/is-it-bad-to-use-important-in-a-css-property – Walter Monroe Feb 06 '23 at 05:46

score 4 · Accepted Answer · edited May 30 '13 at 11:32

4

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

edited May 30 '13 at 11:32

Matias Vad

answered Aug 31 '12 at 07:49

Guffa

Thanks, I think it's better solution opposed to !importnat – Nikita Gavrilov Aug 31 '12 at 08:34

2 Answers2