CODEWITHSUNDEEP
css
matt
matt

Reputation: 44293

css: override active link style?

i have the following selector in my css:

a:active {
  position: relative;
  top: 1px;
}

So every link has this little button-effect when it's pressed.

How can i prevent that behaviour for specific links?

e.g. i have a "back to top" link on my website that shouldn't have this behaviour.

a#back-to-top {
    position:fixed;
    right:0px;
    bottom:20px;
    width:20px;
    height:20px;
    background:green;
}

In this case the "back-to-top" starts to jump. However if I try to reset this it doesn't work.

a#back-to-top:active  {
    position:fixed !important;
    bottom:20px !important;
}

any idea what I'm doing wrong or how I could exclude specific links from that active behaviour?

Upvotes: 0

Views: 2446

Answers (3)

alex
alex

Reputation: 490243

Try resetting the top property as well.

a#back-to-top:active  {
    position: fixed !important;
    top: auto !important;
}

Upvotes: 2

Gabriele Petrioli
Gabriele Petrioli

Reputation: 195992

The following 

a#back-to-top:active {
  position:fixed;
  top: auto;
}

would fix it, since it is more specific and will get applied, and it overrides the part that makes your button move..

No need for the !important directive since the rule has higher specificity and will get applied instead..

demo: http://jsfiddle.net/gaby/zUEER/

Upvotes: 2

vinilios
vinilios

Reputation: 871

i think you should "reset" the top decleration

a#back-to-top:active  {
    position:fixed;
    bottom:20px;
    top: auto;
}

also, use !important only if for some reason the a#back-to-top:active style declartion comes before a:active one.

Upvotes: 0

Related Questions