JSFiddle - React, Tailwind, and code Playground

JS querySelector :scope test

by nilloc

HTML

<div class="parent">
<div id="pappa">
dad
<div class="parent">
kid
<div class="kid">
grandkid
</div>
</div>
</div>
</div>

<div class="parent">
  <div id="momma">
mom
<div class="kid">
kid2
</div>
</div>
</div>

JavaScript

let pop = document.querySelector('#pappa');
console.log('any kid:', pop, pop.querySelectorAll(':scope .kid'));
console.log('only children:', pop.querySelectorAll(':scope>.kid'));
console.log('parent:', pop.querySelector(':scope .parent').closest('.parent'));

// Closest needs to look at parent first, because it can return itself!