Pseudo-class functionality in: not a pseudo-class selector - css problem

Question

I am trying to select everything except what I am currently clicking on.

Basically, I have a group of .node-teaser elements that are all the same and have the same classes, only they get bigger on :active .

When I click on one, I want to "reset" all the other animations / transitions, so ONLY the current one gets bigger. So basically, I would like to:

 .node-teaser:not(.node-teaser:active) { max-height: 50px; ..... } 

However, I cannot use pseudo classes as arguments for :not() . How to solve the problem differently, or am I missing something?

I am stuck with the classes that I have had since they were created by Drupal, and I really don't want to change my PHP templates for the theme. And I want to prove that this works with pure CSS for me, but I'm stuck.

There is a selector ~ . If there was something to select each element before the current element (opposite the tilde selector, which selects everything after the element), I could basically add these two, and I would have everything before and after after = everything except the current . I don’t think there is a selector that does the opposite ~ . Please correct me if I am wrong!

EDIT: Since I seem to be pretty confusing ^. ^ (Sorry for this): on adornis.de I want only one element to expand at a time, when you click on the second, the rest should be closed. Usually: an active close happens anyway, but I delay the transition.

Answer 1

Solution: you can use pseudo classes, you just cannot combine them with a real class.

So,

 .foo:not(.foo:active) {} 

doesn't work but

 .foo:not(:active) {} 

works great :)

This did not solve my problem, but I think it is important to understand. I still have to mix classes and pseudo-classes to achieve my goal.

Conclusion: you cannot do this without javaScript (yet)

Thanks to BoltClock for responding to this in the comment on the original post :)

You are faced with the same problem as someone else the other day: you can use pseudo-classes in: not (), but in this case you combine both a class and a pseudo-class that does not work

Answer 2

One (I would not say the most beautiful) way to do this, returning to the default:

 .node-teaser { max-height: 50px; } .node-teaser:active { max-height: auto; }