CODEWITHSUNDEEP
css
PeanutsMonkey
PeanutsMonkey

Reputation: 7105

Why do I have to specify !important to a hover pseudo-class for it take effect?

I had to use the !important property for a hover style to take effect. The code below would not work without me including the !important property. Why is that?

Non-working code

#sbw a.content_copy:link {
    color: #F12B63;
    padding: 10px;
}

#sbw a.content_copy:visited {
    color: #F12B63;
    padding: 10px;
}

#sbw a.content_copy:hover {
    color: #ffffff;
    background-color: #F12B63;
    padding: 10px;

}

Working code

#sbw a.content_copy:link {
    color: #F12B63;
    padding: 10px;
}

#sbw a.content_copy:visited {
    color: #F12B63;
    padding: 10px;
}

#sbw a.content_copy:hover {
    color: #ffffff !important;
    background-color: #F12B63;
    padding: 10px;

}

Upvotes: 0

Views: 83

Answers (2)

Pranav
Pranav

Reputation: 8871

color: #ffffff !important;

this only ensures that on Hover color #ffffff will always be applied. for Example :-

p { color: red !important; }
 p { color: blue; }

For the paragraph color will always be red, irrespective of second line CSS.

Why to use !important
Suppose you are writing css for your page in which you added a style p { color: red ;} on the first line but later on you again added p { color: blue;} for same element, So your first style will be gone and always second style will applied by browser. So if you add !important with your style it enforce browser to stick with that only.

Upvotes: 1

Denys Séguret
Denys Séguret

Reputation: 382514

The rules with :visited and :link may appear to be more specific.

You may do this :

#sbw a.content_copy:hover, #sbw a.content_copy:visited:hover, #sbw a.content_copy:link:hover {
    color: #ffffff;
    background-color: #F12B63;
    padding: 10px;
}

Upvotes: 1

Related Questions