伪类的功能：不是伪类选择器--css问题

Question

我正在尝试选择除了我正在点击的内容之外的所有内容。

基本上，我有一堆.node-teaser个元素，它们的样式都是相同的，并且具有相同的类，只有它们在:active上变大。

当我点击一个时，我想“重置”所有其他动画/过渡，这样只有当前的动画/过渡变大。所以，基本上，我想：

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

但是，我不能将伪类用作:not()的参数。我如何以不同的方式解决问题，或者我错过了什么？

我坚持使用Drupal生成的类，因为我不想更改主题的PHP模板。而且，我想证明这对我自己的纯CSS有效，但我被卡住了。

有~个选择器。如果在当前元素之前有某些东西要选择每个元素（在元素之后选择所有内容的波形符选择器的对面），我基本上可以将这两个元素添加起来，我之前有所有内容，之后的所有内容都是除了当前元素之外的所有内容。我不认为有一个选择器与~相反。如果我错了，请纠正我！

编辑： 因为我似乎很困惑^。^（对不起）：在adornis.de我想要一次只展开一件商品，当你点击第二件时，其余的应该关闭。通常：无论如何，主动立即关闭，但我推迟了过渡。

Answer 1

解决方案是：你可以使用伪类，你不能将它们与真正的类结合起来。

所以

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

不起作用，但

.foo:not(:active) {}

工作正常:)）

这并没有解决我的问题，但我想这一点很重要。我仍然需要混合类和伪类来实现我的目标。

结论：如果没有javaScript（尚未）

，就无法做到这一点

感谢BoltClock在对原帖的评论中回答了这个问题：）

  

你遇到的问题与前几天其他人所做的完全相同：你可以在：not（）中使用伪类，但在这种情况下你要同时组合一个类和一个伪类，不行

Answer 2

一个（我不会说最美丽的）方法是恢复到默认值：

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

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