Псевдокласс CSS `:scope`

:scope CSS псевдокласс обозначает элементы, которые являются точкой отсчёта, или областью действия, относительно которой проверяются селекторы.

/* Selects a scoped element */
:scope {
  background-color: lime;
}

Элемент или элементы, которым соответствует :scope, зависят от контекста, в котором он используется:

• При использовании на корневом уровне таблицы стилей :scope эквивалентен :root, который в обычном HTML-документе соответствует элементу <html>.
• При использовании внутри блока @scope :scope соответствует корню области действия, заданному в этом блоке. Это позволяет применять стили к корню области действия из самого блока @scope.
• При использовании в вызове DOM API, например querySelector(), querySelectorAll(), matches() или Element.closest(), :scope соответствует элементу, для которого был вызван метод.

Синтаксис

:scope {
  /* ... */
}

Примеры

Использование :scope как альтернативы :root

В этом примере показано, что :scope эквивалентен :root при использовании на корневом уровне таблицы стилей. В этом случае приведённый CSS-код окрашивает фон элемента <html> в оранжевый цвет.

:scope {
  background-color: orange;
}

Использование :scope для стилизации корня области действия в блоке @scope

В этом примере мы используем два отдельных блока @scope, чтобы выбрать ссылки внутри элементов с классами .light-scheme и .dark-scheme соответственно. Обратите внимание, как :scope используется для выбора и стилизации самих корней областей действия. В этом примере корнями областей действия являются элементы <div>, которым присвоены соответствующие классы.

HTML

<div class="light-scheme">
  <p>
    MDN contains lots of information about
    <a href="/en-US/docs/Web/HTML">HTML</a>,
    <a href="/en-US/docs/Web/CSS">CSS</a>, and
    <a href="/en-US/docs/Web/JavaScript">JavaScript</a>.
  </p>
</div>

<div class="dark-scheme">
  <p>
    MDN contains lots of information about
    <a href="/en-US/docs/Web/HTML">HTML</a>,
    <a href="/en-US/docs/Web/CSS">CSS</a>, and
    <a href="/en-US/docs/Web/JavaScript">JavaScript</a>.
  </p>
</div>

CSS

div {
  padding: 10px;
}

@scope (.light-scheme) {
  :scope {
    background-color: plum;
  }

  a {
    color: indigo;
  }
}

@scope (.dark-scheme) {
  :scope {
    background-color: indigo;
    color: antiquewhite;
  }

  a {
    color: plum;
  }
}

Результат

Использование :scope в JavaScript

В этом примере показано использование псевдокласса :scope в JavaScript. Это может быть полезно, если нужно получить непосредственного потомка уже найденного элемента Element.

HTML

<div id="context">
  <div id="element-1">
    <div id="element-1-1"></div>
    <div id="element-1-2"></div>
  </div>
  <div id="element-2">
    <div id="element-2-1"></div>
  </div>
</div>
<p>
  Selected element ids :
  <span id="results"></span>
</p>

JavaScript

const context = document.getElementById("context");
const selected = context.querySelectorAll(":scope > div");

document.getElementById("results").textContent = [...selected]
  .map((element) => `#${element.id}`)
  .join(", ");

Результат

Область действия context — элемент с атрибутом id, равным context. Выбранные элементы — это элементы <div>, являющиеся непосредственными дочерними элементами этого контекста: element-1 и element-2, но не их потомки.

Комбинаторы соседних элементов справа от :scope никогда не дают совпадений

Связь, задаваемая :scope, всегда направлена от предка к потомку относительно корня области действия. Поэтому комбинатор соседних элементов справа от :scope создаёт селектор, который никогда не даст совпадений: ни один элемент не может одновременно находиться внутри области действия селектора и быть соседним элементом для :scope.

:scope + p {
  color: red;
}

:scope ~ * {
  color: red;
}

Селекторы, которые никогда не дают совпадений, могут вызывать предупреждение в инструментах разработчика браузера.

Спецификации

Совместимость с браузерами

См. также

• @scope at-правило
• :root псевдокласс
• Выборка и обход дерева DOM
• Element.querySelector() и Element.querySelectorAll()
• Document.querySelector() и Document.querySelectorAll()
• DocumentFragment.querySelector() и DocumentFragment.querySelectorAll()