Как я могу выборочно применять CSS, когда у элемента нет предка с определенным классом - PullRequest
Новая
       44

Как я могу выборочно применять CSS, когда у элемента нет предка с определенным классом

0 голосов
/ 10 февраля 2019

Попытка не перезаписать некоторые существующие CSS в кодовой базе. 

.my-new-class {
   .existing-class {
      ...some new styles
   }
}

.existing-class {
    ...some old styles
}

Я пробовал это, но я знаю, что это не работает, и я знаю, почему: 

.existing-class {
 :not(.my-new-class) & {
    ...some old styles
 }
}

но я не могу понять, что (или если) есть способ выполнить то, что я хочу.

По сути, я хочу, чтобы стили применялись только в том случае, если определенный элемент не имеет предка (где-либо вдерево) с определенным классом .... или, может быть, кто-то может предложить лучший способ?

Спасибо, ТАК!

1 Ответ

0 голосов
/ 10 февраля 2019

Спасибо @ Temani за сообщение, что мне нужен новый подход.Я собираюсь ответить на мой вопрос для всех, кто может столкнуться с ним.

Я изменил свой HTML-код так, чтобы я знал положение .my-new-class в дереве предков (сделало его вторым предком), такЯ смог сделать это: 

.my-new-class {
   .existing-class {
      ...some new styles
   }
}

.existing-class {
   &:not(.my-new-class)>*>& {
    ...some old styles
   }
}

HTML: 

<div class="existing-class">
   ...with the old style
</div>

<div class="my-new-class">
  <some-element>
    <div class="existing-class">
      ...with the new style
    </div>
  </some-element>
</div>
...