CSS / LESS элементы выбора, НЕ содержащиеся в данном идентификаторе

Question

Скажем, у меня есть следующая структура HTML:

<div id="outer">
   <div id="target">
   </div>
</div>

Внешний div может иметь или не иметь id "external".

Я хочу применить стили к #target, только если он не содержится внутри элемента div с идентификатором "external":

<div id="something-else">
   <div id="target">
   </div>
</div>

С LESS я попробовал следующее:

:not(#outer) {
   #target {
     // styles
   }
}

Очевидно, это не работает (я думаю, потому что: оператор not не исключает вложенные элементы).

Есть ли способ достичь этого с помощью CSS / LESS? Конечно, я знаю, что могу реорганизовать html / logic, чтобы применять стили без использования: not, но мне интересно, есть ли способ достичь того, о чем я спрашиваю, как есть.

Answer 1

Попробуй это

:not(#outer) > #target {
     // Styles
     background-color: red;
   }
}

Вот небольшая скрипка, которую вы можете попробовать.