4

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.

BoltClock
  • 700,868
  • 160
  • 1,392
  • 1,356
Yorrd
  • 726
  • 1
  • 7
  • 20
  • Something like this? http://jsfiddle.net/pk8Ld/ – Blender Oct 20 '12 at 00:25
  • Well, with that solution I could "add" stuff as long as you click either the wrapper or one of the content element, but I need a way to basically add something when you're done clicking. So if your example would change the color of the other divs when the wrapper is NOT active, that'd be the solution, but it changes the color at the same time (which doesn't help me reset :| ) Thanks anyways, tell me if I'm not clear – Yorrd Oct 20 '12 at 00:37
  • You'll have to use JavaScript for this. I'm a bit confused with what you're actually trying to do. – Blender Oct 20 '12 at 00:38
  • okay, maybe I don't see my own problem here. Would you mind just heading over to [www.adornis.de](http://www.adornis.de) and checking the real situation? I want every node teaser (those little expandable boxes) to expand on :active, but only one at a time. So when you click the next one, the previous one should retract. The site is a huge playground up to now, it's not actually online so please don't yell at me for it looking ugly as hell :P – Yorrd Oct 20 '12 at 00:47
  • 1
    You've run into the exact same issue that [somebody else did the other day](http://stackoverflow.com/questions/12834452/pseudo-class-inside-not/12834751#12834751): 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. And you're right, there is no preceding sibling selector, so unless you hack your way around the layout you won't be able to do this with a pure CSS selector. See [this other question](http://stackoverflow.com/questions/12533491/how-to-target-all-divs-of-the-same-class-except-for-hovered-over-div). – BoltClock Oct 20 '12 at 04:36
  • thanks so much, the link helped a lot :) I didn't realize you could use pseudo classes, but just no pseudo classes combined with a "real" class – Yorrd Oct 20 '12 at 09:04

2 Answers2

2

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

Yorrd
  • 726
  • 1
  • 7
  • 20
1

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;
}
kapa
  • 77,694
  • 21
  • 158
  • 175
  • 1
    That's exactly what I'm doing right now, but that doesn't give me access to resetting the other animations. I know I don't express myself well, but I don't know a better way :D I'd like to reset the other animations when starting the max-height animation of the current element – Yorrd Oct 20 '12 at 00:24