Функциональность псевдо класс:не псевдо-селектор класса - проблемы CSS

Я пытаюсь выбрать все, кроме того, на что я сейчас нажимаю.

В принципе, у меня есть куча .node-teaser элементов, которые все стилизованы одинаково и имеют одинаковые классы, только они становятся больше на :active.

Когда я нажимаю на одну из них, я хочу "сбросить" все остальные анимации/переходы, чтобы только текущая стала больше. Итак, в принципе, я хотел бы: 

.node-teaser:not(.node-teaser:active) {
   max-height: 50px;
   .....
}
Однако я не могу использовать псевдоклассы в качестве аргументов для :not(). Как я могу решить проблему на a по-другому, или я что-то упускаю?

Я застрял с классами, которые у меня есть, так как они генерируются Drupal, и я действительно не хочу менять свои шаблоны PHP для этой темы. И, я хочу доказать, что это работает с чистым CSS для себя, но я застрял.

Есть этот ~ селектор. Если бы было что-то, чтобы выбрать каждый элемент перед текущим элементом (напротив селектора Тильды, который выбирает все после элемента), я мог бы в основном добавить их два вверх, и у меня будет все до и все после = все, кроме текущего. Хотя я не думаю, что есть селектор, который делает противоположное ~. Пожалуйста, поправьте меня, если я ошибаюсь!

Править: Так как я, кажется, совсем запутался.^ (Извините за это): on adornis.de я хочу, чтобы только один элемент за раз был расширен, когда вы нажимаете на второй, остальные должны закрываться. Обычно: active закрывается мгновенно в любом случае, но я задерживаю переход.

2 4
css css-selectors css-transitions pseudo-class

2 ответа:

Решение таково: вы можете использовать псевдоклассы, вы просто не можете комбинировать их с реальным классом.

Итак 

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

Не работает, но 

.foo:not(:active) {}

Работает просто отлично :)

Это не решило мою проблему, но я думаю, что это важно понять. Мне все равно придется смешивать классы и псевдоклассы, чтобы достичь своей цели.

Вывод: вы не можете сделать это без javaScript (пока)

Спасибо BoltClock, который ответил на это в комментарии к оригиналу сообщение:)

Вы столкнулись с той же проблемой, что и кто-то другой на днях: вы можете использовать псевдоклассы в :not (), но в этом случае вы объединяете и класс, и псевдокласс, что не нормально

2

Один (я бы не сказал самый красивый) способ сделать это-вернуться к умолчанию: 

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

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