javascript & css: найти элемент у которого нет родителя с заданным классом

Подскажите как найти элемент у которого нет родителя, даже отдалённого родителя с заданным классом

<div class = 'parent1'>
  <div class = 'parent2'>
    <div class = 'element'>Element 1</div>
  </div>
  <div class = 'element'>Element 2</div>
</div>
<div class = 'element'>Element 3</div>

если делать

document.querySelectorAll(':not(.parent1) .element')

то будут найдены все 3 элемента

если делать

document.querySelectorAll(':not(.parent1) > .element')

то будут найдены 2 элемента

А мне нужно, чтобы находился только элемент который вообще не имеет никакого отношения к элементу с классом parent1

P.S.

и подобный вопрос - а можно ли найти только видимый элемент (который не скрыт через visibility или display сам или через любого из родителей)