Question Details

No question body available.

Tags

javascript queryselector selectors-api

Answers (2)

Accepted Answer Available
Accepted Answer
May 7, 2026 Score: 4 Rep: 140,115 Quality: Expert Completeness: 80%

:scope will set the starting point of the selector to the element on which querySelector was called. Without it, the selector will start at the root and will look for elements higher up in the DOM. If you are used to CSS nesting, then it's about the same as the & selector, (which can be used too btw):

const source = document.getElementById("source");
const test = (selector) =>
  console.log(${selector}:, source.querySelector(selector));
test("body span"); // 
test(":scope body span"); // null
test("body :scope span"); // 
test("& body span"); // null
test("body & span"); // 
test(":scope span:is(body *)"); //

However, the use of :scope doesn't in itself mean that the engine won't have to look up from the root of the document. As demonstrated in the example above, it can be placed anywhere in the selector, and you can even have :is() pseudo-class in the selector that would make a look back the tree.

As to whether that selector adds or remove work in case the result would be the same, that would probably depend on the engine, but I'd expect it to have no noticeable difference in most.

May 7, 2026 Score: 0 Rep: 790,524 Quality: Low Completeness: 50%

:scope is used in a query selector as a placeholder to represent the starting element. It's mostly useful when using the > direct descendant operator, so you can limit the result to the first level in the element, rather than searching all levels.

const source = document.getElementById("source");
const test = (selector) =>
  console.log(${selector}:, source.querySelector(selector));
test("span"); // level 2
test(":scope > span"); // level 1