hover state & transition...

[r_tist]

Hi,

Not sure what's missing here, but the link transitions from the white to the darker color. However, from original template somewhere within the transitional shift, I can see a blue color. How do I target that if hover & focus are already "used up" below? - When I check the source, I can see the culprit which likes in original template. I did try to add .link a { } and with another color; but it's just not hitting it to make the alteration. Any recommendations?

.link a {

  color: #fff;

}

.link a:hover, a:focus {

  color: #551d1f;

}

in original WP template I am re-styling:

media="all"

a {

1.    color: #337ab7;
2.    text-decoration: none;}

Thank you.

[BenPleysier · Accepted solution]

Try

.link a {

  color: #fff !important;

}

.link a:hover, .link a:focus {

  color: #551d1f !important;

}

!important will override any persistent style rules within the original template.

[r_tist]

Question: In WP, some of the styles work but others seem to need the override of important. Is it typical/best practice to have the important on several style rules? I mean, is that a standard practice on your custom CSS? - Just for my own knowledge.

Thank you!

[B i r n o u]

it depends on the template use... in WP most of the important rules are used just to be sure that some admin addons, or some component won't be mis used... but in a general way using important is the last tools to be used when none of others ways will be usable.

louis wrote something some times ago about the use of important... I should also read it again (I do'nt now)?....

!important CSS Declarations: How and When to Use Them — Smashing Magazine

[Nancy OShea]

!important is a last resort.  Use it only when necessary. 

Nancy