CSS Selector: элемент, у которого есть класс, и у любого родителя нет другого класса

Question

У меня есть следующая упрощенная структура:

<div class="ion-page ion-page-hidden">
    <div class="generated-plan />
</div>
<div class="ion-page">
    <div class="generated-plan />
</div>

Мне нужен селектор CSS, который выбирает элементы с классом «Генерируемый план», которые не являются потомками элемента, который имеет класс «Ион» -page-скрытый». Я ожидаю, что это соответствует только второму div. В моем реальном коде есть больше элементов между div-адресом ion-page и генерируемым div-планом. Также может быть несколько элементов с классом ion-page-hidden, если это уместно для ответа.

Справочная информация: Я пытаюсь заставить реактор работать с Ioni c реакции. Ioni c скрывает загруженные компоненты. Reactour выделяет первый элемент, соответствующий селектору, который может быть одним из скрытых. Я не могу изменить свойства внешнего div, это Ioni c magi c, внутренний div - это пользовательский компонент.

Answer 1

Я предполагаю (поэтому, пожалуйста, проверьте), что вы ищете следующие условия:

1. родительский элемент должен иметь .ion-page class
2. родительский элемент не должен иметь .ion-page-hidden class
3. дочерний элемент имеет класс .generated-plan

Первое условие выполняется с помощью селектора класса .ion-page. Второе условие выполняется при использовании не селектора с селектором класса :not(.ion-page-hidden).
Однако оба условия применяются к этому элементу. Так что вам нужно установить их друг за другом без пробела между ними .ion-page:not(.ion-page-hidden).

Для третьего условия вы можете использовать потомок селектора (пробел) с селектором класса

Все вместе:

div {
  border: 1px solid black;
  padding: 1em;
  margin: 1em;
}

.ion-page:not(.ion-page-hidden) .generated-plan {
  background: yellow;
}

<div class="ion-page ion-page-hidden">
  .ion-page div
  <div class="generated-plan">one</div>
</div>
<div class="ion-page">
  .ion-page div
  <div class="generated-plan">two</div>
</div>