Correct way to apply CSS style to active state to one button but not other buttons within different class

Question

OK so I found the :not pseudo element and wanted to apply a style to all buttons that are active EXCEPT one within another class. This is the CSS decleration I came up with but Dreamweaver, and more importantly the browser, does not like it and voids the whole decleration...

.button:active:not(.success .button:active) {
    position:relative;
    top:4px;
}

It looks like it makes sense to me logically but is there something about all these colons which confuses CSS?

PS. Its important because the button in the 'success' class is absolutely positioned, and adding this top:4px; screws everything up there.

Thanks

Answer 1

When you say "in the 'success' class", does that mean that you have an element with the class "success" and the button inside it? Something like this:

<div class="success">
    <button class="button"></button>
</div>

If so, :not() is not the selector to use. The solution is to add another class onto the button and apply your styles to that:

<div class="success">
    <button class="button button-success"></button>
</div>

and in the CSS:

.button:active {
    position: relative;
    top: 4px;
}

.button-success:active {
    position: absolute;
    top: auto;
}