Use css next sibling selector (+) with css scope rule

Trying to figure out why this works:

const aa = document.querySelector('div');
//const bb = aa.querySelector(':scope + aside');
const bb = aa.querySelector(':scope > aside');

console.log(bb.classList[0]);

<div>Div<aside class="zoe yip xin"> span</aside></div>
<aside class="abe bob cam">Aside</aside>

but this does not:

const aa = document.querySelector('div');
const bb = aa.querySelector(':scope + aside');
//const bb = aa.querySelector(':scope > aside');

console.log(bb.classList[0]);

<div>Div<aside class="zoe yip xin"> span</aside></div>
<aside class="abe bob cam">Aside</aside>

The first example uses `:scope > aside` to grab the nested aside,
while the second uses `:scope + aside` to TRY / FAIL to grab the sibling aside

The desired result is to use the aa selector to cache the sibling aside.abe.bob.cam element.