CODEWITHSUNDEEP
csscss-selectorscss-transitionspseudo-class
Yorrd
Yorrd

Reputation: 726

Functionality of pseudo class in :not pseudo class selector - css issue

I'm trying to select everything but the thing I'm currently clicking on.

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

When I'm clicking on one, I want to "reset" all other animations/transitions, so that ONLY the current one gets bigger. So, basically, I'd like to:

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

However, I can't use pseudo classes as arguments for :not(). How do I solve the issue on a different way, or, am I missing something?

I'm stuck with the classes I have since they're generated by Drupal and I don't really want to get into changing my PHP templates for the theme. And, I want to prove that this works with pure CSS to myself, but I'm stuck.

There is this ~ selector. If there was something to select every element BEFORE the current element (opposite of the tilde selector which selects everything after the element), I could basically add those two up and I'd have everything before and everything after = everything but the current one. I don't think there is a selector that does the opposite of ~ though. Please correct me if I'm wrong!

EDIT: Since I seem to be quite confusing ^.^ (Sorry for that): on adornis.de I want only ONE item at a time to be expanded, when you click on the second one, the rest should close. Usually :active closes instantly anyways, but I'm delaying the transition.

Upvotes: 4

Views: 199

Answers (2)

Yorrd
Yorrd

Reputation: 726

Solution is: you CAN use pseudo classes, you just cannot have them combined with a real class.

So

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

doesn't work, but

.foo:not(:active) {}

works just fine :)

This didn't solve my problem, but I guess it's important to understand. I'd still have to mix classes and pseudo classes to achieve my goal.

Conclusion: you can't do this without javaScript (yet)

Thanks to BoltClock who answered this in a comment to the original post :)

You've run into the exact same issue that somebody else did the other day: you can use pseudo-classes in :not(), but in this case you're combining both a class and a pseudo-class, which is not OK

Upvotes: 2

kapa
kapa

Reputation: 78691

One (I would not say the most beautiful) way to do it is reverting to the default:

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

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

Upvotes: 1

Related Questions