:scope¶

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

В настоящее время при использовании в таблице стилей :scope совпадает с :root, поскольку в настоящее время нет способа явно установить элемент области действия. При использовании из DOM API, такого как querySelector(), querySelectorAll(), match() или Element.closest(), :scope соответствует элементу, для которого вы вызвали метод.

Синтаксис¶

1
2
3
4

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

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

• Selectors Level 4

Примеры¶

Пример 1¶

В этом простом примере мы демонстрируем, что использование псевдокласса :scope из метода Element.matches() соответствует элементу, для которого он вызывается.

1
2
3
4
5
6
7

let paragraph = document.getElementById('para')
let output = document.getElementById('output')

if (paragraph.matches(':scope')) {
  output.innerText =
    'Yep, the element is its own scope as expected!'
}

1
2
3
4
5

<p id="para">
  This is a paragraph. It is not an interesting paragraph.
  Sorry about that.
</p>
<p id="output"></p>

Пример 2¶

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

 1
 2
 3
 4
 5
 6
 7
 8
 9
10

var context = document.getElementById('context')
var selected = context.querySelectorAll(':scope > div')

document.getElementById(
  'results'
).innerHTML = Array.prototype.map
  .call(selected, function (element) {
    return '#' + element.getAttribute('id')
  })
  .join(', ')

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13

<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 elements ids :
  <span id="results"></span>
</p>

См. также¶

• :root
• :has()

Ссылки¶

• Псевдо-класс :scope ^{MDN (рус.)}

Комментарии