How to use sibling combinator together with `:scope` in `querySelector`

Question

Let's say I have an element and I want to select the next matching sibling. Normally, in css I'd be able to write <some selector for this element> ~ <selector for sibling>, but the sibling combinators (~ and +) don't seem to work when applied inside querySelector with the :scope pseudo-selector.

Here's an example

<div id="container">
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item active"></div>
  <div class="item"></div>
  <div class="item"></div>
</div>

document.addEventListener("DOMContentLoaded", () => {
  const container = document.getElementById('container');

  // this is my element that I have and I want to get the next .active
  const item = container.querySelector('.item:nth-child(2)');

  // this doesn't work
  const nextActiveFromSibling = item.querySelector(':scope ~ .active');
  console.log(`From sibling success: ${nextActiveFromSibling !== null}`);

  // this works but requires me to know how to select the original item from the parent
  const nextActiveFromParent = container.querySelector('.item:nth-child(2) ~ .active');
  console.log(`From parent success: ${nextActiveFromParent !== null}`);
});

prints:

From sibling success: false
From parent success: true

Why doesn't :scope ~ .active work when applied to the selected item?

Answer 1

In CSS :scope ~ .active combination works as "select element with the class 'active' that is a sibling of the parent element represented by :scope.

However, when used in JavaScript's querySelector method, the :scope pseudo-class doesn't work as expected because it represents the context of the function, not the current element. That's why the combination :scope ~ .active doesn't work.

Here's how you can rewrite the selector without using :scope:

document.addEventListener("DOMContentLoaded", () => {
  const container = document.getElementById('container');

  // this is my element that I have and I want to get the next .active
  const item = container.querySelector('.item:nth-child(2)');

  // find the next sibling element with class 'active'
  const parentElement = item.parentElement;
  const nextActiveFromParent = parentElement.querySelector('.item:nth-child(2) ~ .active');

  console.log(`From parent success: ${nextActiveFromParent !== null}`);
});

<div id="container">
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item active"></div>
  <div class="item"></div>
  <div class="item"></div>
</div>

I am available to you if you need further assistance.

Thanks!