Перейти к содержанию

:scope

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

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

Псевдоклассы

Синтаксис

1
2
3
4
/* Selects a scoped element */
:scope {
  background-color: lime;
}

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

Примеры

Пример 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>

:scope

Пример 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>

:scope

См. также

Ссылки

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

Комментарии