Элемент таргетинга, у которого нет родительского элемента с :not(custom-comment) ⇐ Html

[Anonymous]

Я пытаюсь выбрать абзац только в том случае, если он не находится внутри пользовательского компонента my-comment. вот так:
// Style all elements that are NOT inside my-component
*:not(my-component) *{
color: red;
}

это не будет работать, как показано в примере ниже. Если я изменю все это на классовое внутри :not(.my-comComponent-class) * {, это сработает.
Очевидно, что моего компонента не существует. Однако селектор CSS должен работать в любом случае.
Может ли кто-нибудь объяснить, почему это не работает, или это ошибка, или это просто невозможно?


my-component * {
color: green;
}

/* Style all elements that are NOT inside my-component */
*:not(my-component) * {
color: red;
}

.container {
border: 1px solid #ccc;
padding: 10px;
margin: 20px;
}

This paragraph is outside the special container → should be RED.


This paragraph is inside the special container → should be GREEN.
Another element inside → GREEN


Another outside paragraph → RED




Как я могу настроить таргетинг не на свой компонент, а на все остальное?
Моя конечная цель — создать правило стиля, исключающее применение стилей.
:not(my-component) {
other-component {}
second-component {}
}


Подробнее здесь: https://stackoverflow.com/questions/798 ... -component