Как выбрать все элементы, кроме тех, которые находятся в поддеревьях определенных элементов?

Question

Я хочу сопоставить все элементы внутри HTML, за исключением тех, которые находятся внутри определенных элементов.

Кажется, CSS3 не поддерживает такой селектор:

body *:not(.childclass *){
  transform:none;
}

любой простой обходной путь

Answer 1

body :not(.childclass) * {
  transform:none;
}

вы пытаетесь выбрать подстановочный знак (*) для псевдо, что неверно. Я объясню приведенный ниже код:

body :not(.childclass) *

выберите все элементы внутри любого элемента без дочернего класса внутри тега body.

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

body :not(.childclass) *

, что и

body *:not(.childclass) *

, так как между телом и пробелом есть: not, он будет интерпретироваться как все: не совпадающие элементы внутри тела tag.

На самом деле вам не нужен тег body для селектора:

:not(.childclass) *

Будет соответствовать всем элементам внутри тегов без дочернего класса.

Но есть Обходной путь здесь. Если у вас есть дочерний класс внутри соответствующего элемента, он будет выбран так же, как вы выбираете его с помощью подстановочного знака, так как элемент внутри элемента, не являющегося дочерним, который имеет внутри элемента, не являющегося дочерним, внутри элемента дочернего класса, является истинным соответствием.

См .:

https://jsfiddle.net/5nw6k3jL/

Вам необходимо указать уровень для него, например, для двух элементов соответствия уровня:

:not(.childclass) :not(.childclass) * {  }

Это будет соответствовать всем элементам, не входящим в дочерний класс, которые находятся внутри элементов с не дочерним классом.

Вы также можете установить более одного уровня в строке:

  :not(.childclass), :not(.childclass) :not(.childclass) * {  }

Это поможет обоим, так как последний имеет больший приоритет.

Если вы не знаете уровень тега внутри макета, вы можете установить несколько селекторов в ряду или вокруг него JavaScript .

Answer 2

Один из обходных путей с ванилью JS - использовать метод element.matches().

var  els = document.querySelectorAll('*');
els.forEach((elem) => {
    if(!elem.matches(".childclass *")){
        elem.style.transform = 'none';
    }

});