Q:

Canceling :active link css attribute

In the code as below, I want to disable "a:active" color style on (A) position.
Is there a good way for it?
<!DOCTYPE html>
<html>
<head>
    <style>
        a{ background-color: #000; }
        a.foo{ background-color: #0f0; }
        a.bar{ background-color: #00f; }
        a:active{ background-color: #f00; }
        /*
            (A) I want to cancel :active color here.
        */
    </style>
</head>
<body>
    <a href="#">hoge</a>
    <a href="#" class="foo">foo</a>
    <a href="#" class="bar">bar</a>
</body>
</html>

A:

You can't remove property, so you can only overwrite it.
a.foo, a.foo:active{ background-color: #0f0; }
a.bar, a.bar:active{ background-color: #00f; }

