CODEWITHSUNDEEP
htmlcsscss-selectorspseudo-class
bboybeatle
bboybeatle

Reputation: 567

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

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

Upvotes: 1

Views: 2143

Answers (2)

James Long
James Long

Reputation: 4736

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;
}

Upvotes: 1

Alexis B.
Alexis B.

Reputation: 1115

Are you looking for something like

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

as example: https://jsfiddle.net/nh4f821y/

.button {
    padding: 10px;
    background: rgba(0,0,0,0.1);
    float: left;
}

.button:not(:last-child){
    margin-right: 10px;
}

.button:not(.success):active {
    background: rgba(0,0,0,0.2);
}
<div class="button success">1</div>
<div class="button success">2</div>
<div class="button">3</div>
<div class="button">4</div>
<div class="button success">5</div>

<p>On click, the background only change for divs <b>3</b> and <b>4</b></p>

Good Luck'

Upvotes: 1

Related Questions